vue.config.js配置proxy代理產(chǎn)生404錯(cuò)誤的原因及解決

更新時(shí)間：2024年06月20日 09:05:27 作者：kingtopest

這篇文章主要介紹了vue.config.js配置proxy代理產(chǎn)生404錯(cuò)誤的原因及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

原因1：沒有注意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": "",
        },
      },
 
 
}

按照上面的寫法：

如果有一個(gè)/api2的請求進(jìn)來，會(huì)直接被第一條"/api"的規(guī)則匹配到
而后面的"/api2"的規(guī)則就不會(huì)被匹配到，所以此時(shí)就會(huì)產(chǎn)生404錯(cuò)誤

解決辦法

把/api2的匹配規(guī)則放到/api的前面

注意點(diǎn)小結(jié)：

對于有同名前綴的uri路徑（比如/api和/apixxxx這樣的）
為了避免長uri路徑被短uri規(guī)則匹配到,而后面的規(guī)則不生效
必須把短uri路徑的匹配規(guī)則放到文件的最后

原因２：pathRewrite路徑重寫配置錯(cuò)誤

這個(gè)例子中pathWrite寫錯(cuò)了：

被重寫的部分跟進(jìn)來的url內(nèi)容完全不同，沒有被識(shí)別到
這種情況也會(huì)發(fā)生路由匹配不到引發(fā)的404錯(cuò)誤

所以，必須注意：

pathWrite的被重寫的路徑必須跟匹配規(guī)則定義的uri保持一致！
否則就會(huì)報(bào)404錯(cuò)誤！

總結(jié)

以上就是vue.config.js配置proxy代理發(fā)生404錯(cuò)誤的兩大原因。

這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3.0 vue-router4.0打包后頁面空白的解決方法
本文主要介紹了vue3.0 vue-router4.0打包后頁面空白的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vue3 Element-plus el-menu無限級(jí)菜單組件封裝過程
對于element中提供給我們的el-menu組件最多可以實(shí)現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進(jìn)行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無限級(jí)菜單組件封裝,需要的朋友可以參考下
2023-04-04
Vue3之使用js實(shí)現(xiàn)動(dòng)畫示例解析
這篇文章主要為大家介紹了Vue3之使用js實(shí)現(xiàn)動(dòng)畫示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
Vue中多個(gè)元素、組件的過渡及列表過渡的方法示例
這篇文章主要介紹了Vue中多個(gè)元素、組件的過渡及列表過渡的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
Vue 嵌套路由使用總結(jié)（推薦）
這篇文章主要介紹了Vue 嵌套路由使用總結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-01-01
淺析Vue 和微信小程序的區(qū)別、比較
寫了vue項(xiàng)目和小程序，發(fā)現(xiàn)二者有許多相同之處，在此想總結(jié)一下二者的共同點(diǎn)和區(qū)別,需要的朋友可以參考下
2018-08-08
ElementUI?組件之Layout布局(el-row、el-col)
這篇文章主要介紹了ElementUI?組件之Layout布局(el-row、el-col),本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2024-07-07
關(guān)于vuex的學(xué)習(xí)實(shí)踐筆記
vuex是vue的狀態(tài)管理模式，主要可以解決父子組件嵌套層數(shù)較多，或者兄弟組件之間需要維護(hù)同一個(gè)狀態(tài)的情況。下面這篇文章主要給大家介紹了關(guān)于學(xué)習(xí)vuex的相關(guān)資料，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。
2017-04-04
vue實(shí)現(xiàn)大文件切片上傳的示例詳解
前端上傳文件很大時(shí),會(huì)出現(xiàn)各種問題,比如連接超時(shí)了,網(wǎng)斷了,都會(huì)導(dǎo)致上傳失敗,這個(gè)時(shí)候就需要將文件切片上傳,下面我們就來學(xué)習(xí)一下如何使用vue實(shí)現(xiàn)大文件切片上傳吧
2023-11-11
聊聊vue集成sweetalert2提示組件的問題
這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問題，本文通過項(xiàng)目案例實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2021-11-11