ReactJS集成json-server应用部署至Heroku后无法获取数据的求助

我来帮你排查并解决这个问题，核心原因是生产环境下前端请求的目标地址错误，还有部署配置的几个小细节需要调整，咱们一步步来修复：

1. 修正前端API请求地址 #

你现在的前端代码里肯定是直接写了http://localhost:8000/cars这类硬编码的请求地址，但在Heroku上，你的应用域名是https://car-app1.herokuapp.com，localhost只在本地开发环境有效，部署后这个地址指向的是Heroku容器内部，自然拿不到数据。

解决办法：

• 把所有API请求改成相对路径，比如直接用/cars代替http://localhost:8000/cars。因为你的server.js已经把build后的前端静态文件和json-server路由放在同一个服务里了，相对路径会自动指向当前应用的域名根地址。

2. 调整package.json的scripts配置 #

你的start命令用concurrently同时启动了React开发服务器和json-server，但Heroku部署的是生产环境，不需要启动React的开发服务器，只需要运行你的server.js来同时提供静态文件和API服务。

修改scripts配置如下：

"scripts": {
  "start": "node server.js", // 生产环境只启动server.js
  "dev": "concurrently \"react-scripts start\" \"json-server --watch db.json --port 8000\"", // 本地开发用这个命令
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

• 新增dev命令用于本地开发，保留原来的双服务启动逻辑；Heroku会自动使用start命令启动生产服务。
• 删掉proxy字段：这个配置只在React开发服务器（react-scripts start）生效，生产环境下静态文件和API在同一个端口，不需要跨域代理，而且你的server.js已经配置了CORS。

3. 确保db.json被包含在部署包中 #

Heroku会根据Git仓库的内容打包部署，要检查一下.gitignore或者.slugignore文件，确保db.json没有被排除在外。如果有排除规则，把它删掉，这样Heroku才能把数据库文件一起部署上去。

4. 验证CORS配置（可选，优化安全性） #

你的server.js里的CORS配置已经允许所有源访问，这在生产环境可以更严格一点（比如只允许你的Heroku域名），目前的配置不会导致问题，但可以改成更安全的版本：

const corsOptions = {
  origin: 'https://car-app1.herokuapp.com', // 只允许你的应用域名访问
  credentials: true,
  optionSuccessStatus: 200,
};

5. 重新部署到Heroku #

做完以上修改后，提交代码到Git仓库并重新部署：

git add .
git commit -m "fix: 修正生产环境API地址和部署配置"
git push heroku main

部署完成后打开你的Heroku应用，应该就能正常获取数据了。如果还是有问题，可以查看Heroku的实时日志排查：

heroku logs --tail

日志会显示服务启动状态和错误信息，方便进一步定位问题。

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