vue axios 請求跨域

忙碌的菠蘿發表於2020-11-25
VueiOS跨域

接上篇vue baseUrl多後端環境切換，換成真實的地址後發現介面總是不通，這對這個vue的配置還是理解不到位，這回做了波實驗終於通透了

請求封裝思路

1、將axios後端請求和前端請求分離開

這點是用baseURL做到，前端不需要baseUrl，baseURL可以直接配置成後端的公共地址
如果不用代理而直接請求的話，可以是這個樣子：

let host = 'localhost';
let port = '8080';
// 建立axios例項
const service = axios.create({
  // axios中請求配置有baseURL選項，表示請求URL公共部分，每個請求將會帶該部分
  baseURL: "http://"+host+":"+port+process.env.VUE_APP_BASE_API,
  //baseURL: process.env.VUE_APP_BASE_API,
  // 超時
  timeout: 10000
})

將host和port直接配置進url。但會有跨域問題。

2、將axios請求攔截，代理到後端指定地址

這個就是在vue.config.js中進行配置，通過target 和pathRewrite來重寫訪問後端的路徑，這樣在前端看不出來後端的實際訪問地址。

proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
    },

這裡直接將path重寫成空，實際的話可以根據後端的環境進行配置，比如後端配置context-path 為 /dev-api

server.servlet.context-path = /dev-api

這個時候，就可以直接rewrite到 /dev-api來實現整體的訪問變更。

3、通過nginx配置來實現跨域
這個直接參考之前的nginx配置就好

代理跨域配置

vue.config.js中配置devServer.proxy

前端應用和後端 API 伺服器沒有執行在同一個主機上，需要在開發環境下將 API 請求代理到 API 伺服器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置
在這裡插入圖片描述
說明：

1、target 開始直接配置的localhost，沒有匹配到靜態檔案的請求都將走這個代理，走的mockjs，不存在跨域問題；新增埠號後，就產生了跨域問題。
2、changeOrigin 傳送請求頭中host會設定成target
3、pathRewrite 路徑重寫為""
4、process.env.VUE_APP_BASE_API 值為/dev-api

axios 請求配置

在這裡插入圖片描述
配置baseURL與vue.config.js為同一引數，確保axios所發請求均被代理到vue.config.js target配置地址

請求呼叫

測試交易中直接傳送請求

在這裡插入圖片描述

檢視前端請求URL

在這裡插入圖片描述
這裡的請求地址是：

Request URL: http://localhost/dev-api/getVerifyCode

但我們實際後端的地址並不是這個，這個請求將通過代理轉發至實際後端地址。

後端實際為：

http://localhost:8080/getVerifyCode

請求分析

對比前後端兩個url，可以很好的理解vue.config.js中的proxy配置。

前端請求為：http://localhost/dev-api/getVerifyCode
1、將axios請求path中帶有 /dev-api 的請求攔截
2、將對應請求轉發至target ：localhost:8080
3、將請求路徑中的 /dev-api 重寫為 “”
4、請求實際為http://localhost:8080/getVerifyCode

相關文章