react customize-cra配置devServer的proxy正则匹配

背景

一个很老的项目，本地开发时，有个比较复杂的请求，第三方依赖的文件加载方式导致文件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

如有错误，欢迎指正。