React应用setupProxy多环境配置异常：开发环境路径不生效

问题根源 #

测试环境代理正常但开发环境失效，核心原因是两个环境的后端API路径前缀不一致：

• 测试环境后端API路径包含 /bizcomp（比如 https://bizcomp.test.com/bizcomp/restservices/...），代理直接转发 /bizcomp 前缀的请求就能匹配。
• 开发环境后端API路径不包含 /bizcomp（实际是 http://localhost:8080/restservices/...），但代理会把 /bizcomp 前缀一起转发，导致后端收到的路径多了一层，无法识别。

另外，若前端直接请求 http://localhost:8080/bizcomp/...，会完全绕过React开发服务器的代理，也是常见错误场景。

修复方案 #

1. 统一前端请求路径 #

前端必须使用相对路径发起请求，不要直接写死后端地址，示例：

// 正确写法：通过React开发服务器代理转发
fetch('/bizcomp/restservices/v1/service/seller/comptitle')

2. 针对环境配置路径重写 #

修改 setupProxy.js，给开发环境添加路径重写规则，去掉多余的 /bizcomp 前缀：

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

module.exports = function (app) {
  let targetUrl;
  let pathRewrite = {};

  switch (process.env.NODE_ENV) {
    case 'development':
      targetUrl = "http://localhost:8080";
      // 开发环境去掉请求路径中的/bizcomp前缀，匹配后端实际路径
      pathRewrite = { '^/bizcomp': '' };
      break;
    case 'test':
      targetUrl = process.env.REACT_APP_OIDC_REDIRECT_URI;
      // 测试环境保留/bizcomp前缀，匹配测试后端路径
      break;
    default:
      console.error('Unknown environment:', process.env.NODE_ENV);
      return;
  }

  console.log(`Proxying requests to: ${targetUrl}`);

  app.use(
    '/bizcomp',
    createProxyMiddleware({
      target: targetUrl,
      changeOrigin: true,
      secure: false,
      pathRewrite, // 应用路径重写规则
      onProxyReq: (proxyReq, req, res) => {
        const forwardedPath = req.url.replace('^/bizcomp', '');
        console.log(`Forwarding ${req.method} ${req.url} → ${targetUrl}${forwardedPath}`);
      },
      onError: (err) => console.error('Proxy error:', err),
    })
  );
};

验证效果 #

• 开发环境：前端请求 /bizcomp/restservices/... → 代理转发至 http://localhost:8080/restservices/...，匹配后端实际路径。
• 测试环境：前端请求 /bizcomp/restservices/... → 代理转发至 ${REACT_APP_OIDC_REDIRECT_URI}/bizcomp/restservices/...，和之前正常逻辑一致。

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