1、前言

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

2、跨域問題

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

域名不同：當前頁面的域名為 www.example.com，而請求的資源的域名為 api.example.com。
協(xié)議不同：當前頁面的協(xié)議為 https，而請求的資源的協(xié)議為 http。
端口號不同：當前頁面的端口號為 8080，而請求的資源的端口號為 9090。

    此處測試用端口號不同的場景來測試。
    我的后端服務端口為9090
    發(fā)出請求的前端資源端口暫定為5173
    前端請求后端，此時滿足端口號不同，根據(jù)同源策略會出現(xiàn)跨域。

3、后端服務接口

接口名稱：/ai/assistant/getEngineModel
請求類型：GET
服務地址：localhost:9090

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

4、接口跨域測試

4.1 Vue調(diào)用測試

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

<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測試

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

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

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

5、服務接口增加注解@CrossOrigin解決跨域

    確認項目跨域問題存在，對新增服務接口增加注解 @CrossOrigin 即可。
    擴展說明：跨域問題解決方式很多，不限于當前@CrossOrigin注解、WebMvcConfigurer接口和自定義Filter。

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

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

最新評論