如何在CRA React应用中通过代理为所有fetch请求添加路径前缀

解决方案 #

你只需要给代理规则添加pathRewrite配置即可实现自动加前缀的需求，不需要修改任何业务代码，完整配置如下：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    createProxyMiddleware({
      target: 'https://projects.mydomain.com/', 
      changeOrigin: true,
      // 路径重写规则：给所有请求前拼接/b2b-iys前缀
      pathRewrite: {
        '^/': '/b2b-iys/',
      }
    })
  );
};

配置说明 #

• 你之前的修改不生效的原因是，你给代理规则设置了/b2b-iys/的匹配前缀，但是业务代码里的fetch请求路径都是/applications这类不带此前缀的地址，无法匹配到这条代理规则，自然不会触发对应的逻辑。
• 上述配置中的pathRewrite会在代理转发请求时，自动把所有请求路径的开头替换为/b2b-iys/，比如你前端发起fetch("/applications")，代理后实际请求的完整地址就是https://projects.mydomain.com/b2b-iys/applications，完全符合你的预期。

如果你的项目存在部分请求不需要加前缀的情况，可以调整代理匹配规则和重写规则，只给指定前缀的接口做重写即可。

内容的提问来源于stack exchange，提问作者momomo