Webpack devServer.proxy反向代理地址模糊相似規則問題

DerekL發表於2018-11-17
WebdevServer

我們在開發Vue、React等專案用Webpack進行專案配置的時候, 在開發模式下請求資料多少會涉及到它裡面提供的devServe.proxy即Node.js的反向代理中介軟體。

Node.js代理很簡單。輕鬆的配置代理伺服器中介軟體連線，快遞，瀏覽器同步以及更多。 正因為它簡單使開發者容易忽略的一個小細節地址模糊相似

示例

例如專案中有兩個反向代理如下：

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
複製程式碼

*版權宣告：本文為原創文章，未經允許不得轉載。

相關文章