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實(shí)現(xiàn)Excel本地下載及上傳的方法詳解
相信大家在項目中經(jīng)常會遇到一些上傳下載文件的相關(guān)功能。這篇文章將為大家介紹一下Vue實(shí)現(xiàn)Excel本地下載及上傳的示例代碼,需要的可以參考一下2022-07-07
jeecgboot-vue3查詢區(qū)label文字居左實(shí)現(xiàn)過程解析
這篇文章主要為大家介紹了jeecgboot-vue3查詢區(qū)label文字居左實(shí)現(xiàn)過程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-08-08
解決修復(fù)報錯Error in render:TypeError:Cannot read&n
這篇文章主要介紹了解決修復(fù)報錯Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09
vue動態(tài)設(shè)置頁面title的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue動態(tài)設(shè)置頁面title的相關(guān)資料,文中通過實(shí)例代碼結(jié)束的非常詳細(xì),對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08

