React Admin部署到Heroku后无法请求Node.js接口问题咨询

• 你在代码中硬编码了后端服务地址为http://localhost:5000，该地址仅在本地开发环境有效。部署到Heroku后，用户浏览器访问的是Heroku提供的应用域名，请求localhost:5000时会在本地用户设备上寻找对应服务，自然找不到对应资源，抛出ERR_NAME_NOT_RESOLVED错误。
• 你将servicesHost设为空字符串后仍然报错，是因为你未正确将变量和请求路径拼接，或者没有区分开发/生产环境的服务地址配置。

1. 区分开发/生产环境的服务地址配置 #

通过React内置的环境变量process.env.NODE_ENV自动适配不同环境的后端地址，如果你的前后端部署在同一个Heroku实例，直接使用当前页面的域名作为服务地址即可：

// 开发环境走本地后端，生产环境走当前部署域名
const servicesHost = process.env.NODE_ENV === 'development'
  ? 'http://localhost:5000'
  : window.location.origin;

如果你的前后端是分开部署在两个不同的Heroku实例，直接将生产环境的地址替换为你的后端Heroku应用域名即可：

const servicesHost = process.env.NODE_ENV === 'development'
  ? 'http://localhost:5000'
  : 'https://你的后端Heroku应用名.herokuapp.com';

2. 检查URL拼接逻辑 #

确保你所有的API请求都正确拼接了servicesHost前缀，示例如下：

// 正确的拼接方式，请求路径会自动带上服务地址
const requestUrl = `${servicesHost}/api/demande`

3. 修正后端端口监听配置 #

Heroku会为部署的应用动态分配运行端口，不能在后端代码中硬编码监听5000端口，需要读取环境变量process.env.PORT：

// Node.js 后端示例
const PORT = process.env.PORT || 5000
app.listen(PORT, () => {
  console.log(`服务运行在端口${PORT}`)
})

4. 配置后端CORS规则 #

确保后端配置了CORS跨域规则，允许生产环境的前端域名发起请求，避免跨域拦截。

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