使用VueCil代理本地proxytable時出現報錯404怎么解決

使用VueCil代理本地proxytable時出現報錯404怎么解決？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

前言

因為項目中遇到了這個bug：Vue cil2中配置代理proxytable成功，卻無效報錯404，在后端和代理都配置無誤的情況下，還是報404，先已解決，特記錄，希望能幫助到他人；

正文

1. 為什么要使用代理？

代理的作用是：把請求代理轉發到其他服務器的中間件；

例如：我們當前主機為http://localhost:8080/，現在我們有一個需求，如果我們請求/api，我們不希望由3000來處理這個請求，而希望由另一臺服務器https://www.example.org/api來處理這個請求怎么辦？

這時候就要使用代理來解決！

2. 在vue中如何使用多個代理？

module.exports = {
dev: {
 proxyTable: {
  // 第一個代理
  '/api-test': { 
  target: 'https://www.example.org:', /// 目標服務器 host
  ws:true, //是否啟用websocket
  secure: true, // 如果是https接口，需要配置這個參數
  changeOrigin: true, // // 默認false，是否需要改變原始主機頭為目標URL，是否跨域
  pathRewrite: {
   '^/api-test/old': '/api-test/new' // 重寫請求，比如我們源訪問的是api-test/old，那么請求會被解析為/api-test/new
  },
  //第二個代理
  '/api-else': { 
  target: 'https://197.32.22.33:8090', 
  ws:true, //是否啟用websocket
  secure: true, 
  changeOrigin: true, 
  pathRewrite: {
   '^/api-else': '' //默認寫法，如果不寫pathRewrite就是默認為空；
  },
  //第三個代理
  '/api-three': { 
  target: 'https://197.32.22.33:9090', 
  changeOrigin: true, 
  pathRewrite: {
   '^/api-three': '/api-three' //重寫請求，這樣本地請求不會有兩次/api-three
  },
  }
 },

上述代碼即可在vue-cil項目中配置代理；

代理的參數有很多，詳細可以查看：http-proxy-middleware中的Options，自行添加；

那下面我們來解析一下為什么會：Vue代理本地proxytable成功，卻無效報錯404的幾種情況

3. bug 原因分析

1.在瀏覽器或postman中測試接口是否正常訪問；（最重要！！不然改半天都沒用）

那怎么才是成功的訪問呢？

例如：拿第二個代理舉例：你要訪問的接口為https://197.32.22.33:8090/api-else/getsomething.json，在瀏覽器直接輸入有返回值并測試無誤后再進行下一步；

2.要確保書寫方式完全正確！

2.1（參考寫法2） 這時候你本地去請求的接口地址會變成：http://localhost:8080/api-else/api-else/getsomething.json才是正常的！

是不是會好奇為什么會有兩個/api-else，因為在本地：http://localhost:8080/api-else相當于：https://197.32.22.33:8090，這才是正常的！

2.2 (參考寫法3)

在按上述寫法還是有誤的情況下，可以參考寫法3的路由去更改測試。例：你要訪問的接口為https://197.32.22.33:9090/api-three/getThreething.json，本地配置后：http://localhost:8080/api-three/getThreething.json。

多說一句，為什么要提第三種寫法？

這種適用于前后端分離多后臺項目，后臺項目的包名為：api-three，使用第2中寫法，在打包之后部署生產環境會出現請求的問題（我們自己項目踩過的坑，偶發），所以之后規定代理和后臺包名統一，并且不能直接寫在請求中，而是在配置代理后，重寫代理的請求，指向包名；

3.請修改完config的index.js后，答應我一定重啟下項目npm run dev；

4.也是我這次bug的原因（正經臉，這個超級細微！）

在配置多個代理的情況下，代理名稱不能相同，也不能出現重疊的情況！

錯誤示范（第二個代理失效）：

 proxyTable: {
  // 第一個代理
  '/api-test': { 
  target: 'https://www.example.org:', /// 目標服務器 host
  },
  //第二個代理
  '/api-testAAA': { 
  target: 'https://197.32.22.33:8090', 
}

這的錯誤真的很難發現，在查了源碼才看懂的；

這里說一下，為什么這樣寫會404！

vue的代理是基于 http-proxy-middleware實現的，而http-proxy-middleware對走哪個代理名稱的的方法如下：

function matchSingleStringPath(context, uri) {
 const pathname = getUrlPathName(uri);
 return pathname.indexOf(context) === 0;
}

是的！他用的是indexOf() === 0來判斷的！！！所以如果你的多個代理重疊/api-testAAA和/api-test這樣出現的話，他們是都會返回true的！

但是/api-test更快判斷完，所以/api-testAAA就失效了！！！

結語

說明：Vue cil的版本號是2，老版本的項目了；之后會記錄下新版本vue cil 3+學習過程；

好了，吐槽完了，希望大家都不要踩坑~

補充知識：關于Vue的生產環境proxyTable代理問題

1、通過在 config/index.js 配置文件中找到proxyTable配置項

dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
  '/api': { //3
  target: 'http://xxx:8080',
  changeOrigin: true,
// secure:false 代理https必須要加
  pathRewrite: {
   // 1 '^/api': '/api' 這種接口配置出來  http://xxx:8080/api/getlist
   // 2 ^/api': '/' 這種接口配置出來  http://xxx:8080/getlist
  }
  }
 }
 }

2、上面代碼里的1和2的區別

當你接口有api的時候就需要^api的意思就是有api會首先使用api，防止被系統認為3處的api，如果接口中沒有api則不需要，即可以省略，總結：

接口以“/api”開頭的配置 數字1 ，沒有則不需要

3、如果配置多個代理

dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
  '/api': { //3
  target: 'http://xxx:8080',
  changeOrigin: true,
  pathRewrite: {
   // A '^/api': '/api' 這種接口配置出來  http://xxx:8080/api/getlist
   // ^/api': '/' 這種接口配置出來  http://xxx:8080/getlist
  }
  }，
 '/api/1': { //
  target: 'http://xxx:8081',
  changeOrigin: true,
  pathRewrite: {
   // A '^/api/1': '/api/1' 這種接口配置出來  http://xxx:8081/api/1/getlist
   // ^/api/1': '/' 這種接口配置出來  http://xxx:80801/getlist
  }
  }
 
 }
 }

上面的調用接口的時候：

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時出現報錯404怎么解決問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。