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