前言

因?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ì)微！）

在配置多個(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就失效了?。。?/p>

結(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

以上這篇解決VueCil代理本地proxytable無(wú)效報(bào)錯(cuò)404的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論