您好,登錄后才能下訂單哦!
使用VueCil代理本地proxytable時(shí)出現(xiàn)報(bào)錯(cuò)404怎么解決?針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
因?yàn)轫?xiàng)目中遇到了這個(gè)bug:Vue cil2中配置代理proxytable成功,卻無(wú)效報(bào)錯(cuò)404,在后端和代理都配置無(wú)誤的情況下,還是報(bào)404,先已解決,特記錄,希望能幫助到他人;
1. 為什么要使用代理?
代理的作用是:把請(qǐng)求代理轉(zhuǎn)發(fā)到其他服務(wù)器的中間件;
例如:我們當(dāng)前主機(jī)為http://localhost:8080/,現(xiàn)在我們有一個(gè)需求,如果我們請(qǐng)求/api,我們不希望由3000來(lái)處理這個(gè)請(qǐng)求,而希望由另一臺(tái)服務(wù)器https://www.example.org/api來(lái)處理這個(gè)請(qǐng)求怎么辦?
這時(shí)候就要使用代理來(lái)解決!
2. 在vue中如何使用多個(gè)代理?
module.exports = { dev: { proxyTable: { // 第一個(gè)代理 '/api-test': { target: 'https://www.example.org:', /// 目標(biāo)服務(wù)器 host ws:true, //是否啟用websocket secure: true, // 如果是https接口,需要配置這個(gè)參數(shù) changeOrigin: true, // // 默認(rèn)false,是否需要改變?cè)贾鳈C(jī)頭為目標(biāo)URL,是否跨域 pathRewrite: { '^/api-test/old': '/api-test/new' // 重寫(xiě)請(qǐng)求,比如我們?cè)丛L問(wèn)的是api-test/old,那么請(qǐng)求會(huì)被解析為/api-test/new }, //第二個(gè)代理 '/api-else': { target: 'https://197.32.22.33:8090', ws:true, //是否啟用websocket secure: true, changeOrigin: true, pathRewrite: { '^/api-else': '' //默認(rèn)寫(xiě)法,如果不寫(xiě)pathRewrite就是默認(rèn)為空; }, //第三個(gè)代理 '/api-three': { target: 'https://197.32.22.33:9090', changeOrigin: true, pathRewrite: { '^/api-three': '/api-three' //重寫(xiě)請(qǐng)求,這樣本地請(qǐng)求不會(huì)有兩次/api-three }, } },
上述代碼即可在vue-cil項(xiàng)目中配置代理;
代理的參數(shù)有很多,詳細(xì)可以查看:http-proxy-middleware中的Options,自行添加;
那下面我們來(lái)解析一下為什么會(huì):Vue代理本地proxytable成功,卻無(wú)效報(bào)錯(cuò)404的幾種情況
3. bug 原因分析
1.在瀏覽器或postman中測(cè)試接口是否正常訪問(wèn);(最重要??!不然改半天都沒(méi)用)
那怎么才是成功的訪問(wèn)呢?
例如:拿第二個(gè)代理舉例:你要訪問(wèn)的接口為https://197.32.22.33:8090/api-else/getsomething.json,在瀏覽器直接輸入有返回值并測(cè)試無(wú)誤后再進(jìn)行下一步;
2.要確保書(shū)寫(xiě)方式完全正確!
2.1(參考寫(xiě)法2) 這時(shí)候你本地去請(qǐng)求的接口地址會(huì)變成:http://localhost:8080/api-else/api-else/getsomething.json才是正常的!
是不是會(huì)好奇為什么會(huì)有兩個(gè)/api-else,因?yàn)樵诒镜兀篽ttp://localhost:8080/api-else相當(dāng)于:https://197.32.22.33:8090,這才是正常的!
2.2 (參考寫(xiě)法3)
在按上述寫(xiě)法還是有誤的情況下,可以參考寫(xiě)法3的路由去更改測(cè)試。例:你要訪問(wèn)的接口為https://197.32.22.33:9090/api-three/getThreething.json,本地配置后:http://localhost:8080/api-three/getThreething.json。
多說(shuō)一句,為什么要提第三種寫(xiě)法?
這種適用于前后端分離多后臺(tái)項(xiàng)目,后臺(tái)項(xiàng)目的包名為:api-three,使用第2中寫(xiě)法,在打包之后部署生產(chǎn)環(huán)境會(huì)出現(xiàn)請(qǐng)求的問(wèn)題(我們自己項(xiàng)目踩過(guò)的坑,偶發(fā)),所以之后規(guī)定代理和后臺(tái)包名統(tǒng)一,并且不能直接寫(xiě)在請(qǐng)求中,而是在配置代理后,重寫(xiě)代理的請(qǐng)求,指向包名;
3.請(qǐng)修改完config的index.js后,答應(yīng)我一定重啟下項(xiàng)目npm run dev;
4.也是我這次bug的原因(正經(jīng)臉,這個(gè)超級(jí)細(xì)微?。?/p>
在配置多個(gè)代理的情況下,代理名稱不能相同,也不能出現(xiàn)重疊的情況!
錯(cuò)誤示范(第二個(gè)代理失效):
proxyTable: { // 第一個(gè)代理 '/api-test': { target: 'https://www.example.org:', /// 目標(biāo)服務(wù)器 host }, //第二個(gè)代理 '/api-testAAA': { target: 'https://197.32.22.33:8090', }
這的錯(cuò)誤真的很難發(fā)現(xiàn),在查了源碼才看懂的;
這里說(shuō)一下,為什么這樣寫(xiě)會(huì)404!
vue的代理是基于 http-proxy-middleware實(shí)現(xiàn)的,而http-proxy-middleware對(duì)走哪個(gè)代理名稱的的方法如下:
function matchSingleStringPath(context, uri) { const pathname = getUrlPathName(uri); return pathname.indexOf(context) === 0; }
是的!他用的是indexOf() === 0來(lái)判斷的?。?!所以如果你的多個(gè)代理重疊/api-testAAA和/api-test這樣出現(xiàn)的話,他們是都會(huì)返回true的!
但是/api-test更快判斷完,所以/api-testAAA就失效了?。?!
結(jié)語(yǔ)
說(shuō)明:Vue cil的版本號(hào)是2,老版本的項(xiàng)目了;之后會(huì)記錄下新版本vue cil 3+學(xué)習(xí)過(guò)程;
好了,吐槽完了,希望大家都不要踩坑~
補(bǔ)充知識(shí):關(guān)于Vue的生產(chǎn)環(huán)境proxyTable代理問(wèn)題
1、通過(guò)在 config/index.js 配置文件中找到proxyTable配置項(xiàng)
dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { //3 target: 'http://xxx:8080', changeOrigin: true, // secure:false 代理https必須要加 pathRewrite: { // 1 '^/api': '/api' 這種接口配置出來(lái) http://xxx:8080/api/getlist // 2 ^/api': '/' 這種接口配置出來(lái) http://xxx:8080/getlist } } } }
2、上面代碼里的1和2的區(qū)別
當(dāng)你接口有api的時(shí)候就需要^api的意思就是有api會(huì)首先使用api,防止被系統(tǒng)認(rèn)為3處的api,如果接口中沒(méi)有api則不需要,即可以省略,總結(jié):
接口以“/api”開(kāi)頭的配置 數(shù)字1 ,沒(méi)有則不需要
3、如果配置多個(gè)代理
dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { //3 target: 'http://xxx:8080', changeOrigin: true, pathRewrite: { // A '^/api': '/api' 這種接口配置出來(lái) http://xxx:8080/api/getlist // ^/api': '/' 這種接口配置出來(lái) http://xxx:8080/getlist } }, '/api/1': { // target: 'http://xxx:8081', changeOrigin: true, pathRewrite: { // A '^/api/1': '/api/1' 這種接口配置出來(lái) http://xxx:8081/api/1/getlist // ^/api/1': '/' 這種接口配置出來(lái) http://xxx:80801/getlist } } } }
上面的調(diào)用接口的時(shí)候:
A /api/1/getlist 即可 http://xxx:8081/api/1/getlist
/api/getlist 即可 http://xxx:8080/api/getlist
第二種情況
/api/1/getlist 即可 http://xxx:8081/getlist
/api/getlist 即可 http://xxx:8080/getlist
關(guān)于使用VueCil代理本地proxytable時(shí)出現(xiàn)報(bào)錯(cuò)404怎么解決問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開(kāi),可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。