Webpack devServer.proxy反向代理地址模糊相似规则问题
栏目: JavaScript · 发布时间: 6年前
内容简介:例如项目中有两个反向代理如下:我们忽略端口,此时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 复制代码
*版权声明:本文为博主原创文章,未经博主允许不得转载。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 神经规则引擎:让符号规则学会变通
- ???? 图解 == 操作符规则和不同类型间转换规则
- Wireshark 【OSI二层】抓包过滤规则和显示过滤规则实例
- 从 dubbo zookeeper 注册地址提取 zookeeper 地址
- 以太坊中如何判断一个地址为合约账户地址
- Holer 1.1.0 发布,支持在线修改内网地址和邮箱地址
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法设计与实验题解
王晓东 / 电子工业 / 2006-9 / 46.00元
《算法设计与实验题解》是与普通高等教育“十一五”国家级规划教材《计算机算法设计与分析》(第2版)配套的辅助教材,对主教材中的全部习题做了解答或给出了解题思路提示,并对主教材的内容进行了扩展,有些主教材中无法讲述的较深入的主题以习题的形式展现出来。为了提高学生解决实际问题的能力,《算法设计与实验题解》还将主教材中的许多习题改造成算法实现题,要求学生设计出算法并上机实现。作者还结合精品课程建设,进行了......一起来看看 《算法设计与实验题解》 这本书的介绍吧!