Heroku部署的React应用调用localhost而非Express后端Heroku URL问题

核心问题分析 #

你遇到的问题根源很明确：组件内的fetch请求硬编码了http://localhost:8000地址。部署到Heroku后，前端应用运行在Heroku的域名下，但代码里还是指向本地的8000端口，自然会出现连接拒绝的错误。

另外要注意：React package.json里的proxy配置仅在开发环境（npm start）生效，生产环境（build后的静态文件）不会使用这个配置——因为你的架构是后端直接serve前端build文件夹，前后端属于同域名，完全可以用相对路径来请求接口。

修复步骤 #

1. 修改fetch请求的URL为相对路径

把组件里的绝对URL替换成相对路径：

fetchStripePlans = () => {
  const stripeProduct = 'prod_FlXXXXXBVn8';
  // 去掉硬编码的localhost地址，用相对路径
  const url = `/v1/products/${stripeProduct}`;
  const fetchConfig = {
    method: 'GET',
    headers: {
      'content-type': 'application/json'
    }
  };
  fetch(url, fetchConfig)
    .then(data => data.json())
    .then(stripe => {
      const { data } = stripe;
      this.setState({ stripePlans: data });
    })
    .catch(err => {
      this.setState({ error: true, errorMessage: err.genericError });
    });
};

这样修改后：

• 开发环境下，create-react-app的proxy会自动把/v1/products的请求转发到http://localhost:8000
• 生产环境下，请求会直接发送到当前页面的域名（也就是Heroku后端的域名），和你的后端接口路径匹配

2. 确认后端静态文件配置正确

你的server.js里已经有了正确的静态文件服务代码，这部分没问题，确保build后的前端文件能被后端正确托管：

app.use(express.static(path.join(__dirname, '../client/build')));

额外说明 #

为什么之前的教程里保留proxy为本地地址？因为那是针对开发环境的配置，方便在本地开发时解决跨域问题。生产环境下，由于前后端部署在同一个服务器/域名下，不需要跨域，直接用相对路径即可，proxy配置不会生效也不需要生效。

内容的提问来源于stack exchange，提问作者maison.m