背景
一个很老的项目，本地开发时，有个比较复杂的请求，第三方依赖的文件加载方式导致文件url会加入当前页的url，没法升级，也没有其他修改方式。本地开发时，为了获取该文件，修改了devServer的proxy，之前都是比较简单的使用proxy代理功能，这次修改稍微复杂，记录一下。
修改
需求类似于将这样的请求http://localhost:8080/a/b/${id}/c/d.js 修改为http://localhost:8080/c/d.js，匹配中间一段，将/a/b/${id}/c/修改为/c/。
上代码
module.exports = {
webpack: override(...),
devServer: overrideDevServer(config => {
return {
...config,
proxy: [
{
context: ['/abc', '/bcd'], // 其他后台请求
target: "http://test.hello/",
changeOrigin: true,
},
{
context: (pathname, req) => {
return /^\/a\/b\/[a-zA-Z0-9]+\/c\//.test(pathname); // 用于匹配当前请求url
},
target: 'http://localhost:8080',
pathRewrite: (path, req) => path.replace(/^\/a\/b\/[a-zA-Z0-9]+\/c\//, '/c/') // 替换该url
}
]
};
})
};
参考
devServer其实是用的 http-proxy-middleware 中的配置，之前一直不晓得在哪看proxy的详细配置，现在发现其实只要参考http-proxy-middleware的配置项即可，本地代理能自由组合了。
https://github.com/chimurai/http-proxy-middleware#options
http-proxy-middleware的pathFilter就是我们常用的这种格式中的'/abc':
proxy: {
'/abc': {
target: "http://hello.world/",
changeOrigin: true,
},
}
使用pathFilter的对象模式，都没法匹配/a/b/${id}/c/。
pathFilter
因此使用function方式，如下图
function
context 相当于'/abc'，而pathRewrite也可以用function模式来做更复杂的替换。
pathRewrite
如有错误，欢迎指正。
