WebpackdevServer.proxy反向代理地址模糊相似规则问题我们在开发Vue、React等项⽬⽤Webpack进⾏项⽬配置的时候, 在开发模式下请求数据多少会涉及到它⾥⾯提供的devServe.proxy即Node.js的反向代理中间件。
Node.js代理很简单。轻松的配置代理服务器中间件连接，快递，浏览器同步以及更多。 正因为它简单使开发者容易忽略的⼀个⼩细节地址模糊相似
⽰例
例如项⽬中有两个反向代理如下：
A: 192.168.1.100:80
B: 192.168.1.135:80
复制代码
我们忽略端⼝，此时A、B分别代理不同的服务器 我们给代理地址添加⼀下这样的别名如下：
proxy: {
'/api': {
target: '192.168.1.100:80', // A Server
changeOrigin: true,
webserver接口开发pathRewrite: {'^/api': '/api'}
},
'/api135': {
target: '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 = " 192.168.1.100:80/api" // 代理地址：服务器+路径
const reg = RegExp("^"+alias); // 如果通过
if (st(pathname)) { // 通过
place(RegExp("^" + alias), targetAndPath); // 192.168.1.100:80/api135/abc
}
// 不通过迭代下⼀个
复制代码
解决
要解决这个问题只能在项⽬中代理配置表按照命名的从⼤到⼩进⾏排序添写就可以了， 或者换⼀个跟所有匹配都不沾边的别名。如下：
proxy: {
'/api135': {
target: '192.168.1.135:80', // B Server
changeOrigin: true,
pathRewrite: {'^/api135': '/api'}
},
'/api': {
target: '192.168.1.100:80', // A Server
changeOrigin: true,
pathRewrite: {'^/api': '/api'}
}
}
复制代码
最后
如果到这⾥不太明⽩的话， ⽤webpack配置时候，⼤多数同学会⽤主流的Vue、React等框架。
这⾥我⽤Vue来举例⼦，其他框架⼤同⼩异，类似Vue的动态路由和静态路由的关系，/about/tom 和 /about/:name，要匹配静态路由往往需要添加在动态路由前⾯即可。
也就同理等于
/api135
/api:path
复制代码
*版权声明：本⽂为原创⽂章，未经允许不得转载。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。