vue跨域proxy代理配置詳解

第vue跨域proxy代理配置詳解目錄引言例一例二總結(jié)

引言

相信很多人都用過proxy，這里就不多說proxy的基本使用，這里要說一下很多人使用proxy的一個誤區(qū)，大家一般都是直接將管官方的例子拿過來，修改一下代理目標直接就是用了，但是代理的路徑匹配你真的會用么？

如果你能夠認證看完那么我保證你下次再配置代理的時候就能一步就能完成，無需多次npmrunserve

先來一個正則熱熱身待會需要用，看懂了再往下看：

例一

這是我使用express自己搭建的一個超級簡單的服務(wù)器，代碼如下(沒有設(shè)置允許跨域請求)

//引入express框架

constexpress=require("express")

//創(chuàng)建網(wǎng)站服務(wù)器

constapp=express()

app.get("/list",(req,res)={

//向客戶端直接響應(yīng)一個對象

res.send({name:"張三",age:333})

app.get("/aa/api/list",(req,res)={

//向客戶端直接響應(yīng)一個對象

res.send({name:"李四",age:666})

app.get("/aa/list",(req,res)={

//向客戶端直接響應(yīng)一個對象

res.send({name:"王五",age:888})

//監(jiān)聽端口

app.listen(3000)

console.log("網(wǎng)站服務(wù)器啟動成功")

下面是我的vue.config.js的配置信息

constpath=require("path")

module.exports={

devServer:{

//open:true,//打開瀏覽器

overlay:{

//當出現(xiàn)編譯錯誤或警告時，在瀏覽器中顯示全屏覆蓋。

warnings:false,//不顯示警告

errors:true,//顯示錯誤

proxy:{

//下面的key是一個正則表達式它的/api前加上^和不加^符號差別非常大

"/api":{

target:"http://localhost:3000",

pathRewrite:{

//下面的key是一個正則表達式它的/api前加上^和不加^符號差別非常大

"^/api":"",

runtimeCompiler:true,

lintOnSave:false,

configureWebpack:{

resolve:{

alias:{

"@":path.resolve(__dirname,"src"),

}

大家只需要關(guān)注下面的一部分就可以了，其他的對這次講解沒有影響：

發(fā)送請求的代碼如下：

template

div

!--測試跨域，這個測試的非常好--

el-button@click="send1"type="success"點我發(fā)送請求1/el-button

el-button@click="send2"type="success"點我發(fā)送請求2/el-button

/div

/template

script

import{axiosImpl}from"@/utils/request"

exportdefault{

methods:{

asyncsend1(){

letres=awaitaxiosImpl.get("/aa/api/list")

console.log(res)

asyncsend2(){

letres=awaitaxiosImpl.get("/api/list")

console.log(res)

/script

style/style

很簡單的幾行代碼，那么此時點擊兩個按鈕會分別輸入什么呢？

看結(jié)果：

也許想的和你不太一樣，那么這就是我們要說的重點了，在圈1和圈2圈起來的地方，是一個正則表達式

由于此時圈1沒有加^符號，那么所有帶有/api的請求都會進來，然后進行代理，在進行pathRewrite的時候，由于加上了^符號，那么就只會匹配以/api開頭的路徑，把以/api開頭的這一個/符號和三個字母變?yōu)榭?，其余的都保留下來，因此第一個請求到服務(wù)器就變成了/aa/api/list，第二個就變成了/list，因此結(jié)果就變成了上面的樣子。

例二

如果將vue.config.js的值改成下面的這個樣子，其余的不變，結(jié)果又會是什么呢？

結(jié)果如下：

原理和上面的一樣

由于此時圈1加上了^符號，那么所有以/api開頭的請求都會進來，然后進行代理，在代理的時候，由于沒有上了^符號，那么就會吧路徑中所有的/api都變成空，對于請求二到最后到服