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

咱們在開發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
複製代碼

*