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