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

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

原因 一

百度最多的解釋

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

原因二

這個原因得注意一下

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

比如說我之前的全局 http.js 配置文件是這樣寫的

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

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

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

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

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

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

注意

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

詳解

請求路徑必須帶有標(biāo)識?。?！

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

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

pathRewrite

pathRewrite: { // 請求路徑重寫
    '^/api': '',   //重寫請求路徑
 },

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

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

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

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

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

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

又比如說我們的配置為

pathRewrite: { // 請求路徑重寫
    '^/api': '/rewrite',   //重寫請求路徑
 }

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

changeOrigin

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

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

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

總結(jié)

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

最新評論