vue?proxytable代理根路徑的同時(shí)增加其他代理方式
proxytable代理根路徑的同時(shí)增加其他代理
Vue 項(xiàng)目有一個(gè)需求，需要對(duì)根路徑 ‘/’ 進(jìn)行代理，但同時(shí)還存在其余特例路徑的訪問(wèn)需求 ‘/py’，例：
- 代理 /* 到 localhost:5000
- 代理 /py/*到 localhost:5001
此時(shí)，需要將特例路徑的代理寫在根路徑的前面，否則會(huì)被根路徑的代理覆蓋，無(wú)法成功進(jìn)行代理：
module.exports = {
dev: {
proxyTable: {
'/py': {
target: `localhost:5001`,
changeOrigin: true,
pathRewrite: {
'/py': '',
}
},
'/': {
target: `localhost:5000`,
// secure: true, // 是否 https
changeOrigin: true, // 是否是跨域請(qǐng)求
}
}
}
}使用proxytable的路徑問(wèn)題
代碼例子
proxyTable: {undefined
'/list': {undefined
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
? '^/list': '/list'
}
}
}這樣我們?cè)趯憉rl的時(shí)候，只用寫成 /list/1 就可以代表 api.xxxxxxxx.com/list/1
proxytable的默認(rèn)pathRewrite為
pathRewrite: {
? ? ? '^/api': ''
? ? }這樣我們?cè)趯憉rl的時(shí)候，寫 /api/1 就可以代表 api.xxxxxxxx.com/1
注意： '/api' 為匹配項(xiàng)，target 為被請(qǐng)求的地址，因?yàn)樵?ajax 的 url 中加了前綴 '/api'，而原本的接口是沒(méi)有這個(gè)前綴的，所以需要通過(guò) pathRewrite 來(lái)重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'。如果本身的接口地址就有 '/api' 這種通用前綴，就可以把 pathRewrite 刪掉。
changeOrigin參數(shù)，如果設(shè)置為true，那么本地會(huì)虛擬一個(gè)服務(wù)端接收你的請(qǐng)求并代你發(fā)送該請(qǐng)求，這樣就不會(huì)有跨域問(wèn)題了。
另：proxytable只在開(kāi)發(fā)環(huán)境中使用
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vite打包后白屏之router-view不生效問(wèn)題
這篇文章主要介紹了解決vite打包后白屏之router-view不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue組件定義，全局、局部組件，配合模板及動(dòng)態(tài)組件功能示例
這篇文章主要介紹了vue組件定義，全局、局部組件，配合模板及動(dòng)態(tài)組件功能,結(jié)合實(shí)例形式分析了vue.js中組件的定義、全局組件、局部組件、配合模板組件及動(dòng)態(tài)組件的相關(guān)使用方法與操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
我們?cè)谧鲰?xiàng)目經(jīng)常會(huì)遇到組件功能不能滿足業(yè)務(wù)需求的時(shí)候,這時(shí)候需要在原有的組件上進(jìn)行二次封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件二次封裝的一些實(shí)用技巧,需要的朋友可以參考下2022-04-04
本篇文章主要介紹了vue-cli中的webpack配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了Vue使用Canvas繪制圖片、矩形、線條、文字，下載圖片的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue?+?ele?實(shí)現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實(shí)現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
vue 點(diǎn)擊其他區(qū)域關(guān)閉自定義div操作
這篇文章主要介紹了vue 點(diǎn)擊其他區(qū)域關(guān)閉自定義div操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue框架之goodvs組件開(kāi)發(fā)詳解,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了vue cli4環(huán)境變量和模式示例詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue實(shí)現(xiàn)超過(guò)兩行顯示展開(kāi)收起的代碼
這篇文章主要介紹了vue實(shí)現(xiàn)超過(guò)兩行顯示展開(kāi)收起的代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10