Webpack devServer.proxy反向代理地址模糊相似規則問題
摘要：
例如專案中有兩個反向代理如下：
A: http://192.168.1.100:80
B: http://192.168.1.135:80
複製程式碼
我們忽略埠，此時A、B分別代理不同的伺服器
我們給代理地址新增一下這樣的別名如下：
proxy: {
'/api...
例如專案中有兩個反向代理如下：
A: http://192.168.1.100:80 B: http://192.168.1.135:80 複製程式碼
我們忽略埠，此時A、B分別代理不同的伺服器 我們給代理地址新增一下這樣的別名如下：
proxy: {
'/api': {
target: 'http://192.168.1.100:80', // A Server
changeOrigin: true,
pathRewrite: {'^/api': '/api'}
},
'/api135': {
target: 'http://192.168.1.135:80', // B Server
changeOrigin: true,
pathRewrite: {'^/api135': '/api'}
}
}
複製程式碼
/api代理A伺服器下的/api地址
/api135 代理B伺服器下的/api地址
但是如果按此順序新增，這裡呢有個隱藏的命名規則的坑地址模糊相似
假設當我們訪問/api135/abc時，也就是真實地址B伺服器/api/abc。 此時Webpack 會優先匹配到 /api, 然後找到/api的代理配置 最終生成地址 A伺服器/api135/abc。
這裡可能會問為什麼不是 地址/api/xxx呢？
此時Webpack只是對url pathname進行了正則開始匹配 即 /^/xxx/，然後用不改變開始別名進行查詢/api 而是 /api135 首先了解一個特性js迴圈物件是按照編寫順序進行迴圈的。 所以上面先新增的/api 後有 /api135
簡單演示一下這個過程
const pathname = "/api135/abc"; // 輸入的地址 const alias = "/api" // 代理別名 const targetAndPath = " http://192.168.1.100:80/api" // 代理地址：伺服器+路徑 const reg = RegExp("^"+alias); // 如果通過 if (reg.test(pathname)) { // 通過 return pathname.replace(RegExp("^" + alias), targetAndPath); // http://192.168.1.100:80/api135/abc } // 不通過 迭代下一個 複製程式碼
解決
要解決這個問題只能在專案中代理配置表按照命名的從大到小進行排序添寫就可以了， 或者換一個跟所有匹配都不沾邊的別名。如下：
proxy: {
'/api135': {
target: 'http://192.168.1.135:80', // B Server
changeOrigin: true,
pathRewrite: {'^/api135': '/api'}
},
'/api': {
target: 'http://192.168.1.100:80', // A Server
changeOrigin: true,
pathRewrite: {'^/api': '/api'}
}
}
複製程式碼
最後
如果到這裡不太明白的話， 用webpack配置時候，大多數同學會用主流的Vue、React等框架。
這裡我用Vue來舉例子，其他框架大同小異，類似Vue的動態路由和靜態路由的關係，/about/tom 和 /about/:name，要匹配靜態路由往往需要新增在動態路由前面即可。
也就同理等於
/api135 /api:path 複製程式碼