Webpack devServer.proxy反向代理地址模糊相似规则问题

栏目: JavaScript · 发布时间: 5年前

内容简介:例如项目中有两个反向代理如下:我们忽略端口,此时A、B分别代理不同的服务器 我们给代理地址添加一下这样的别名如下:/api 代理A服务器下的/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
复制代码

*版权声明:本文为博主原创文章,未经博主允许不得转载。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法竞赛入门经典(第2版)

算法竞赛入门经典(第2版)

刘汝佳 / 清华大学出版社 / 2014-6-1 / CNY 49.80

《算法竞赛入门经典(第2版)》是一本算法竞赛的入门与提高教材,把C/C++语言、算法和解题有机地结合在一起,淡化理论,注重学习方法和实践技巧。全书内容分为12 章,包括程序设计入门、循环结构程序设计、数组和字符串、函数和递归、C++与STL入门、数据结构基础、暴力求解法、高效算法设计、动态规划初步、数学概念与方法、图论模型与算法、高级专题等内容,覆盖了算法竞赛入门和提高所需的主要知识点,并含有大量......一起来看看 《算法竞赛入门经典(第2版)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具