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
复制代码

*