为什么Heroku部署的NodeJS应用其他设备访问加载不出数据库数据

问题根因定位 #

从你提供的Heroku运行日志可以看到，所有外部访问请求只有静态资源（CSS、JS、图片、配置文件）的加载记录，没有任何/api前缀的接口请求记录，结合你本地访问正常、其他设备访问异常的特征，问题出在前端代码的API请求地址配置错误：
你本地开发时前端大概率配置了固定的接口请求前缀为http://localhost:7000/api，本地访问时这个地址是有效的，但是其他设备访问你部署在Heroku的应用时，前端依旧会向访问者本地的7000端口发请求，自然拿不到数据。

修复步骤 #

1. 修改前端接口基准地址配置
   找到前端代码中配置API请求前缀的位置，改为动态适配环境的写法，示例（以axios配置为例）：

// 开发环境用本地后端地址，生产环境用相对路径，自动匹配当前部署域名
const baseApiUrl = process.env.NODE_ENV === 'production' ? '/api' : 'http://localhost:7000/api';

// 如果你用axios创建实例的写法
const request = axios.create({
  baseURL: baseApiUrl,
  // 其他原有配置
})

如果你的前端代码里有零散写死的http://localhost:7000/api/xxx请求，全部替换成上述动态写法或者直接去掉前缀写/api/xxx即可。

2. 配置Heroku自动构建前端（可选但推荐）
   避免每次本地构建后再提交代码，在你项目根目录的package.json的scripts字段中添加自动构建命令：

{
  "scripts": {
    // 保留你原来的其他命令，新增以下行
    "heroku-postbuild": "cd client && npm install && npm run build"
  }
}

Heroku部署时会自动执行这个命令，在服务端完成前端代码的构建。

3. 重新提交代码部署
   修改完成后将最新代码推送到Heroku，部署完成后再用其他设备访问即可正常加载数据。

验证方法 #

如果修复后依旧有问题，可以在其他设备访问应用时打开浏览器开发者工具的「网络」标签，查看接口请求的地址是否正确，请求是否返回正常状态码，就可以快速定位剩余问题。

内容的提问来源于stack exchange，提问作者Moparthi Srinivas teja