vue的代理配置pathRewrite重寫不生效問題及解決
更新時間：2022年04月14日 09:54:59 作者：繪碼先生
這篇文章主要介紹了vue的代理配置pathRewrite重寫不生效問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
代理配置pathRewrite重寫不生效
本人遇到的情況在網(wǎng)上搜索時沒有看到本人遇到的情況。
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? //代理匹配前綴2
? ? ? ? ? ? '/api2': {
? ? ? ? ? ? ? ? target: 'http://localhost:5001',
? ? ? ? ? ? ? ? pathRewrite: {'^/api2': ''},
? ? ? ? ? ? ? ? ws: true,
? ? ? ? ? ? ? ? changeOrigin: true
? ? ? ? ? ? },
?? ??? ??? ?//代理匹配前綴1
? ? ? ? ? ? '/api': {
? ? ? ? ? ? ? ? target: 'http://localhost:5000',
? ? ? ? ? ? ? ? pathRewrite: {'^/api': ''},
? ? ? ? ? ? ? ? ws: true,)
? ? ? ? ? ? ? ? changeOrigin: true
? ? ? ? ? ? }
? ? ? ? }
? ? }開始時配置了/api前綴的代理，沒有問題，然后又配置了/api2前綴的配置代理，然后就無法訪問/api2前綴的代理了。
原因：就是因為/api在前面，先匹配了/api，例如訪問/api2/test，由于先匹配了/api所以重寫/api為空字符串后，路徑變?yōu)榱?/test，自然就不對了
解決：把/api2放在/api前面，讓api2先匹配到，或者取名叫/api2，讓其無法先匹配到/api
webpack代理---pathRewrite
今天遇到個問題，前提是項目是我本地有一份后端，端口號不同，前臺4000，后端3100，請求方式4000代理到3100
代理到本地
接口請求方式如下
http://localhost:4000/api/scoringrules/all ? //每個請求后面都有/api
配置：
"proxy": {
? ? "/api": {
? ? ? "target": "http://localhost:3100",
? ? ? "changeOrigin": true,
? ? ? "pathRewrite": { ? ? // 如果接口本身沒有/api需要通過pathRewrite來重寫了地址,這里把/api轉(zhuǎn)成‘ '
? ? ? ? "^/api": ""
? ? ? }
? ? }
? },pathRewrite：重寫路徑
后端識別時候把/api替換成空，后端沒有/api
/api只是作為區(qū)分路由和接口的方式
具體要不要配置pathRewrite,要看前端的請求方式，以及后臺的接受方式
ps：
比如：我在配置本地的時候
前端請求的參數(shù)的時候有/api，來區(qū)分網(wǎng)頁還接口，但是后臺接受的沒有,則需要如上配置
但是：我在配置都域名的時候，域名接口地址是帶/api的，所以此時無需配置pathRewrite
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
淺談vue中computed屬性對data屬性賦值為undefined的原因
本文主要介紹了淺談vue中computed屬性對data屬性賦值為undefined的原因，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
在vue中獲取微信支付code及code被占用問題的解決方法
這篇文章主要介紹了在vue中獲取微信支付code及code被占用問題的解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue中的diff算法時常是面試過程中的考點,本文將為大家講解何為diff以及diff算法的實現(xiàn)過程,那么在了解diff之前,我們需要先了解虛擬DOM是什么,需要的朋友可以參考下2024-02-02
uni-app提供了異步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2個API獲取系統(tǒng)信息，系統(tǒng)信息返回的內(nèi)容非常多，各操作系統(tǒng)、各家小程序、各瀏覽器對它們的定義也不相同2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue開發(fā)實現(xiàn)評論列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Element-ui中元素滾動時el-option超出元素區(qū)域的問題
這篇文章主要介紹了Element-ui中元素滾動時el-option超出元素區(qū)域的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
在本篇文章里小編給大家整理的是關(guān)于vue倒計時刷新頁面不會從頭開始的解決方法，需要的朋友們參考下。2020-03-03
這篇文章主要介紹了Vue自定義元素身上的右鍵事件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在項目中經(jīng)常會復(fù)用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時將它們設(shè)為全局的就顯得很重要了,下面這篇文章主要給大家介紹了關(guān)于vue如何定義全局變量和全局方法的相關(guān)資料,需要的朋友可以參考下2023-04-04
利用angular、react和vue實現(xiàn)相同的面試題組件
eact 和angular，vue 這三個框架最近都比較火，下面這篇文章主要給大家介紹了關(guān)于利用angular、react和vue實現(xiàn)相同的面試題組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2018-02-02