部署到Heroku的React SSR应用如何配置正确的API URL？

嘿，这问题我之前也碰到过，核心是没搞清楚Heroku的端口机制和服务部署逻辑，我来给你拆解下：

为什么你的配置会失败？ #

Heroku的每个应用只会分配一个动态端口（通过process.env.PORT获取），你没法同时让SSR服务器跑3000、API服务器跑8080——两个服务抢同一个端口会直接报错，而且生产环境里的localhost是容器内部地址，外部请求根本访问不到。你之前尝试的https://myapp.herokuapp.com/api:3000也不对，Heroku的端口已经被整合到域名里了，不需要额外加端口号。

正确的解决方案：合并服务+相对路径调用 #

最靠谱的做法是把SSR服务器和API服务器合并成一个Express服务，共用同一个端口，这样不管开发还是生产环境，前端都能用相对路径调用API，完全不用硬编码域名。

1. 合并Express服务代码

把原来分开的SSR和API路由放到同一个Express实例里：

const express = require('express');
const app = express();

// 先写API路由（要放在SSR路由前面，避免被*覆盖）
app.get('/api/data', (req, res) => {
  res.json({ content: '从API返回的数据' });
});

// 再写SSR渲染路由
app.get('*', (req, res) => {
  // 你的SSR渲染逻辑，比如生成React字符串、注入HTML等
  res.send(`
    <html>
      <body>
        <div id="root">${reactHtml}</div>
        <script src="/client-bundle.js"></script>
      </body>
    </html>
  `);
});

// 监听Heroku分配的端口，本地默认用3000
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`服务运行在端口 ${PORT}`));

2. 前端用相对路径调用API

不管开发还是生产环境，前端请求API时直接用相对路径：

// 前端代码（React组件里）
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('API请求失败：', err));

3. 本地开发的代理配置（可选）

如果本地开发时你还是想分开跑SSR和API服务（比如SSR跑3000，API跑8080），可以在SSR的Express里加个代理，把/api请求转发到8080：

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

// 只在开发环境启用代理
if (process.env.NODE_ENV === 'development') {
  app.use('/api', createProxyMiddleware({
    target: 'http://localhost:8080',
    changeOrigin: true
  }));
}

这样本地开发时，前端调用/api会自动转发到http://localhost:8080/api，生产环境则直接走合并后的服务路由，完全不用改前端代码。

总结一下核心要点 #

• Heroku每个应用只有一个可用端口，必须合并SSR和API服务
• 用相对路径/api调用接口，避免硬编码域名和端口
• 本地开发通过代理统一请求路径，保持前后端代码一致性

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