如何解决MERN栈Heroku部署时ERR_CONNECTION_REFUSED错误

问题根因 #

你客户端的API请求配置中，将接口根地址硬编码为了http://localhost:5000：

const API = axios.create({baseURL: 'http://localhost:5000'})

项目部署到Heroku后，前端代码运行在访问用户的本地浏览器中，此时向localhost:5000发请求，相当于请求用户本地的5000端口，而用户本地并没有启动你的服务端程序，自然会抛出ERR_CONNECTION_REFUSED错误。本地运行正常是因为你本地同时启动了前端和后端服务，5000端口确实有服务响应。这也符合你观察到的「Heroku日志无报错」的现象：请求根本没有发送到Heroku的服务端，所以服务端不会留下任何请求记录。

修复方案 #

你采用的是前后端同域名部署的模式（生产环境下服务端直接托管前端构建后的静态资源），直接按以下两步修改即可：

1. 修改客户端API配置的根地址为相对路径：

// 将原来的硬编码地址替换为 / 即可
const API = axios.create({baseURL: '/'})

2. 为了兼容本地开发环境，在客户端的package.json中新增代理配置：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    // 原有依赖保持不变
  }
  // 其余配置保持不变
}

修改完成后重新提交代码部署到Heroku即可生效。本地开发时，create-react-app会自动将所有接口请求代理到本地5000端口的服务端，生产环境下会自动请求当前Heroku应用的域名接口，不需要做额外适配。

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