快捷導(dǎo)航

vue.config.js中devServer.proxy配置說(shuō)明及配置正確不生效問(wèn)題解決

更新時(shí)間：2023年02月13日 10:56:18 作者：cc_King

Vue項(xiàng)目devServer.proxy代理配置詳解的是一個(gè)非常常見(jiàn)的需求,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中devServer.proxy配置說(shuō)明及配置正確不生效問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下

proxy 配置確認(rèn)、解析

devServer: {
    https: true, // 開(kāi)啟https模式
    // 配置服務(wù)器代理
    proxy: {
      '/api': { // 匹配訪問(wèn)路徑中含有 '/api' 的路徑
        target: 'http://localhost:3000/', // 測(cè)試地址、目標(biāo)地址
        changeOrigin: true,
        ws: true, // 是否開(kāi)啟 webSocket 代理
        pathRewrite: { // 請(qǐng)求路徑重寫(xiě)
          '^/api': '',   //重寫(xiě)請(qǐng)求路徑
        },
      }
    }
  },

原因一

百度最多的解釋

配置寫(xiě)錯(cuò)了 (解決：復(fù)制粘貼上面的實(shí)例下去改)
路徑?jīng)]有匹配上 (解決：看本文的詳解部分)

原因二

這個(gè)原因得注意一下

方式是給我們開(kāi)發(fā)環(huán)境用的，其次是我們的請(qǐng)求要被開(kāi)發(fā)服務(wù)器接收到，且不能匹配到請(qǐng)求，然后我們的請(qǐng)求就會(huì)被代理到配置的URL。
注釋掉，或者改為本地路徑，否則代理不會(huì)生效

比如說(shuō)我之前的全局 http.js 配置文件是這樣寫(xiě)的

const http = axios.create({
  baseURL: 'http://localhost:3000/',
})

所以不論是生產(chǎn) 還是開(kāi)發(fā) 環(huán)境下，我的請(qǐng)求都會(huì)發(fā)送給我們配置的baseURL，而不會(huì)走我們的代理?。。?。

所以我們得修改一下配置，使我們的生產(chǎn)路徑在生產(chǎn)環(huán)境下才生效

let baseURL = "/";
if (process.env.NODE_ENV === 'production') {
  baseURL = 'http://localhost:3000/';
}

const http = axios.create({
  baseURL,
})

這樣在開(kāi)發(fā)環(huán)境下，我們的 baseURL = "/", 代理就可以生效了。

注意

還有一點(diǎn)就是，即使我們的代理生效了，但是在瀏覽器請(qǐng)求頭中展示的也不是配置的代理地址；
所以測(cè)的時(shí)候得多問(wèn)問(wèn)后端請(qǐng)求過(guò)去沒(méi)有，或者自己node搭個(gè)簡(jiǎn)易的服務(wù)器看看成沒(méi)成功；
不要一根筋的死盯瀏覽器的請(qǐng)求頭地址。

詳解

請(qǐng)求路徑必須帶有標(biāo)識(shí)?。?！

proxy: {
      '/api': { 
      ...
      }
 }

用代理首先你得有一個(gè)標(biāo)識(shí)，表明你的這個(gè)連接要使用代理;
不然的話 html css js 這些靜態(tài)資源都跑去代理。
/api 就是告訴 node ,我接口用 /api 開(kāi)頭的才使用代理，所以接口都寫(xiě)成 /api/xx/xx
出現(xiàn)問(wèn)題：請(qǐng)求路徑?jīng)]有 /api ，使用 pathRewrite 解決

pathRewrite

pathRewrite: { // 請(qǐng)求路徑重寫(xiě)
    '^/api': '',   //重寫(xiě)請(qǐng)求路徑
 },

pathRewrite的key值 ^/api 就是一個(gè)正則表達(dá)式。

pathRewrite的value值為替換后的路徑。

這里的話就是將匹配成功的地址當(dāng)做一個(gè)字符串，然后執(zhí)行 js 的 replace 方法，將執(zhí)行成功的最終結(jié)果作為最后的請(qǐng)求路徑。

比如：
我們有一個(gè)請(qǐng)求 axios.get("/api/aa/bb/cc") ;
根據(jù)我們這里配置的 proxy，帶有 /api 的請(qǐng)求路徑就需要進(jìn)行代理，且 /api/aa/bb/cc 路徑中含有 /api ，所以該請(qǐng)求就需要代理。
將路徑當(dāng)做字符串執(zhí)行， "/api/aa/bb/cc".replace(/^\/api/, "")
執(zhí)行結(jié)果： /aa/bb/cc
最終的請(qǐng)求路徑變成了 http://localhost:3000/aa/bb/cc 不含/api；

而 axios.get("/ee/ff/dd") 這個(gè)請(qǐng)求就不會(huì)進(jìn)行代理，因?yàn)槠ヅ洳簧衔覀冾A(yù)設(shè)的規(guī)則（請(qǐng)求路徑?jīng)]有 /api）

最終的請(qǐng)求路徑變成了 http://localhost:3000/ee/ff/dd, 和原路徑一致；

又比如說(shuō)我們的配置為

pathRewrite: { // 請(qǐng)求路徑重寫(xiě)
    '^/api': '/rewrite',   //重寫(xiě)請(qǐng)求路徑
 }

那么我們的請(qǐng)求 axios.get("/api/aa/bb/cc") ;
會(huì)執(zhí)行 "/api/aa/bb/cc".replace(/^\/api/, "/rewrite")；
最終的請(qǐng)求路徑變成了 http:/rewrite/localhost:3000//aa/bb/cc；
將 /rewrite 替換了開(kāi)頭的/api。

changeOrigin

假設(shè)，如果你的前端服務(wù)器是 http://localhost:3000，后端是 http://localhost:8082。

那么后端通過(guò) request.getHeader(“Host”) 獲取依舊是 http://localhost:3000。

如果你設(shè)置了 changeOrigin: true，那么后端通過(guò) request.getHeader(“Host”) 獲取才是 http://localhost:8082。代理服務(wù)器此時(shí)會(huì)根據(jù)請(qǐng)求的 target 地址修改 Host。

總結(jié)

到此這篇關(guān)于vue.config.js中devServer.proxy配置說(shuō)明及配置正確不生效問(wèn)題解決的文章就介紹到這了,更多相關(guān)vue.config.js中devServer.proxy配置說(shuō)明內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: