快捷導(dǎo)航

從Vue到Postman全面驗(yàn)證API接口跨域問(wèn)題解決

更新時(shí)間：2024年08月09日 11:12:03 作者：niaonao

我們都知道跨域是同源策略導(dǎo)致的,域名不同、協(xié)議不同、端口號(hào)不同任意一種情況都會(huì)導(dǎo)致跨域,這篇文章主要介紹了從Vue到Postman全面驗(yàn)證API接口跨域問(wèn)題,需要的朋友可以參考下

1、前言

    最近剛接手了一個(gè)新項(xiàng)目，業(yè)務(wù)還沒(méi)了解全，讓開(kāi)發(fā)功能。做了倆接口，postman自測(cè)完能拿到數(shù)據(jù)就給前端聯(lián)調(diào)了。
    過(guò)了十分鐘，前端告訴我要解決下跨域問(wèn)題。我心想，這個(gè)服務(wù)都運(yùn)行這么久了，生產(chǎn)環(huán)境還有三方產(chǎn)品在調(diào)用它，怎么突然存在跨域問(wèn)題?？戳讼马?xiàng)目確實(shí)沒(méi)有做跨域配置。
    但是三方產(chǎn)品都在用很久了。帶著疑問(wèn)，還是找方法去測(cè)了下接口是否支持跨域。然后再去配置跨域攔截，解決跨域問(wèn)題。

2、跨域問(wèn)題

我們都知道跨域是同源策略導(dǎo)致的。域名不同、協(xié)議不同、端口號(hào)不同任意一種情況都會(huì)導(dǎo)致跨域。

域名不同：當(dāng)前頁(yè)面的域名為 www.example.com，而請(qǐng)求的資源的域名為 api.example.com。
協(xié)議不同：當(dāng)前頁(yè)面的協(xié)議為 https，而請(qǐng)求的資源的協(xié)議為 http。
端口號(hào)不同：當(dāng)前頁(yè)面的端口號(hào)為 8080，而請(qǐng)求的資源的端口號(hào)為 9090。

    此處測(cè)試用端口號(hào)不同的場(chǎng)景來(lái)測(cè)試。
    我的后端服務(wù)端口為9090
    發(fā)出請(qǐng)求的前端資源端口暫定為5173
    前端請(qǐng)求后端，此時(shí)滿足端口號(hào)不同，根據(jù)同源策略會(huì)出現(xiàn)跨域。

3、后端服務(wù)接口

接口名稱：/ai/assistant/getEngineModel
請(qǐng)求類(lèi)型：GET
服務(wù)地址：localhost:9090

@RestController
@RequestMapping("/ai/assistant")
public class AssistantController {
    @GetMapping("/getEngineModel")
    public Result<List<EngineModelVO>> getEngineModel(){
        return ResultUtils.success(engineModelList);
    }
}

4、接口跨域測(cè)試

4.1 Vue調(diào)用測(cè)試

Vue項(xiàng)目端口為5173，運(yùn)行后訪問(wèn)localhost:5173服務(wù)。
此處Vue項(xiàng)目中引入了axios組件，直接使用axios調(diào)用接口進(jìn)行測(cè)試。

<template>
    <AButton @click="clickWechat"/>
</template>
<script>
import axios from 'axios'
const clickWechat =() => {
    axios({
      method: 'get',
      url: 'http://localhost:9090/ai/assistant/getEngineModel',
      withCredentials: true,
      data: {},
    }).then(({ data }) => {
      console.log(data)
    })
}
</script>

跨域失敗截圖

跨域成功截圖

4.2 Postman測(cè)試

    在Postman下新建Collections，然后在項(xiàng)目下新建請(qǐng)求Add request。
    在Headers下新增Origin，維護(hù)值為localhost:5173。表示我要從localhost:5173請(qǐng)求localhost:9090的服務(wù)。
    點(diǎn)擊Send，雖然服務(wù)響應(yīng)Status為200，Response Body 也正常返回接口數(shù)據(jù)。
    但是Response Headers中不包含Access-Control-Allow-Origin localhost: 5173，說(shuō)明當(dāng)前請(qǐng)求存在跨域問(wèn)題。

跨域失敗截圖
缺少Access-Control-Allow-Origin localhost: 5173

跨域成功截圖
包含以下響應(yīng)內(nèi)容
Access-Control-Allow-Origin localhost: 5173
Vary: Origin
Access-Control-Allow-Credentials: true

5、服務(wù)接口增加注解@CrossOrigin解決跨域

確認(rèn)項(xiàng)目跨域問(wèn)題存在，對(duì)新增服務(wù)接口增加注解 @CrossOrigin 即可。
擴(kuò)展說(shuō)明：跨域問(wèn)題解決方式很多，不限于當(dāng)前@CrossOrigin注解、WebMvcConfigurer接口和自定義Filter。

@RestController
@RequestMapping("/ai/assistant")
public class AssistantController {
    @GetMapping("/getEngineModel")
    @CrossOrigin(origins = "*")
    public Result<List<EngineModelVO>> getEngineModel(){
        return ResultUtils.success(engineModelList);
    }
}

到此這篇關(guān)于從Vue到Postman全面驗(yàn)證API接口跨域問(wèn)題的文章就介紹到這了,更多相關(guān)Vue到Postman全面驗(yàn)證API接口跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: