vue.config.js配置proxy代理產(chǎn)生404錯(cuò)誤的原因及解決
在使用vue做開(kāi)發(fā)時(shí)，請(qǐng)求api接口時(shí)為了解決跨域問(wèn)題，一般會(huì)設(shè)置proxy代理，
但有時(shí)候會(huì)莫名其妙的出現(xiàn)404錯(cuò)誤，這里總結(jié)一下vue設(shè)置proxy代理產(chǎn)生404錯(cuò)誤的幾種原因：
原因1：沒(méi)有注意vue proxy代理優(yōu)先級(jí)的規(guī)則
vue proxy代理匹配的規(guī)則是按照配置的內(nèi)容從上到下，順序逐個(gè)匹配的
因此第一個(gè)被匹配到的規(guī)則生效以后, 后面就不會(huì)被匹配到
舉個(gè)例子：
proxy: {
"/api/": {
target: "http://proxyAddr:port",
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
},
"/api2/": {
target: "http://proxyAddr2:port",
changeOrigin: true,
pathRewrite: {
"^/api2": "",
},
},
}按照上面的寫(xiě)法：
- 如果有一個(gè)/api2的請(qǐng)求進(jìn)來(lái)，會(huì)直接被第一條"/api"的規(guī)則匹配到
- 而后面的"/api2"的規(guī)則就不會(huì)被匹配到，所以此時(shí)就會(huì)產(chǎn)生404錯(cuò)誤
解決辦法
把/api2的匹配規(guī)則放到/api的前面
注意點(diǎn)小結(jié)：
- 對(duì)于有同名前綴的uri路徑（比如/api和/apixxxx這樣的）
- 為了避免長(zhǎng)uri路徑被短uri規(guī)則匹配到,而后面的規(guī)則不生效
- 必須把短uri路徑的匹配規(guī)則放到文件的最后
原因２：pathRewrite路徑重寫(xiě)配置錯(cuò)誤
這個(gè)例子中pathWrite寫(xiě)錯(cuò)了：
- 被重寫(xiě)的部分跟進(jìn)來(lái)的url內(nèi)容完全不同，沒(méi)有被識(shí)別到
- 這種情況也會(huì)發(fā)生路由匹配不到引發(fā)的404錯(cuò)誤
所以，必須注意：
- pathWrite的被重寫(xiě)的路徑必須跟匹配規(guī)則定義的uri保持一致！
- 否則就會(huì)報(bào)404錯(cuò)誤！
總結(jié)
以上就是vue.config.js配置proxy代理發(fā)生404錯(cuò)誤的兩大原因。
這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解如何在Vue3使用＜script lang=“ts“ setup＞語(yǔ)法糖
本文主要介紹了在Vue3使用＜script lang=“ts“ setup＞語(yǔ)法糖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue-router實(shí)現(xiàn)簡(jiǎn)單vue多頁(yè)切換、嵌套路由、路由跳轉(zhuǎn)的步驟和報(bào)錯(cuò)
最近學(xué)習(xí)到VUE路由這塊,發(fā)現(xiàn)這塊知識(shí)點(diǎn)有點(diǎn)多,好容易混亂,這篇文章主要介紹了vue-router實(shí)現(xiàn)簡(jiǎn)單vue多頁(yè)切換、嵌套路由、路由跳轉(zhuǎn)的步驟和報(bào)錯(cuò)的相關(guān)資料,需要的朋友可以參考下2024-05-05
這篇文章主要給大家分享的是Vue 組件化基本使用，所謂組件化，就是把頁(yè)面拆分成多個(gè)組件，每個(gè)組件依賴(lài)的 CSS、JS、模板、圖片等資源放在一起開(kāi)發(fā)和維護(hù)。 因?yàn)榻M件是資源獨(dú)立的，所以組件在系統(tǒng)內(nèi)部可復(fù)用，組件和組件之間可以嵌套，下面來(lái)看文章學(xué)習(xí)內(nèi)容吧2021-10-10
WebStorm無(wú)法正確識(shí)別Vue3組合式API的解決方案
這篇文章主要介紹了WebStorm無(wú)法正確識(shí)別Vue3組合式API的解決方案，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-02-02
vue+element加入簽名效果（移動(dòng)端可用）
這篇文章主要介紹了vue+element加入簽名效果（移動(dòng)端），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue-cli3項(xiàng)目展示本地Markdown文件的方法
這篇文章主要介紹了vue-cli3項(xiàng)目展示本地Markdown文件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue-awesome-swiper 基于vue實(shí)現(xiàn)h5滑動(dòng)翻頁(yè)效果【推薦】
說(shuō)到h5的翻頁(yè)，很定第一時(shí)間想到的是swiper。但是我當(dāng)時(shí)想到的卻是，vue里邊怎么用swiper。這篇文章主要介紹了vue-awesome-swiper - 基于vue實(shí)現(xiàn)h5滑動(dòng)翻頁(yè)效果 ,需要的朋友可以參考下2018-11-11
vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
今天就好好說(shuō)說(shuō)vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問(wèn)題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0，感興趣的朋友一起看看吧2022-06-06
vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒加載,需要的朋友可以參考下2018-08-08
細(xì)說(shuō)Vue組件的服務(wù)器端渲染的過(guò)程
這篇文章主要介紹了細(xì)說(shuō) Vue 組件的服務(wù)器端渲染，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05