如何连接React应用与Node.js后端并部署到Heroku平台？

将前端axios请求中的固定域名删除，改为相对路径，同时检查请求路径与后端路由规则是否匹配：

// 修改前
axios({ method: "POST", url: "http://localhost:3000/api/v1/user/register", data: data, headers: header });
// 修改后（注意后端路由前缀为/api/v1/users，需确保路径拼写一致）
axios({ method: "POST", url: "/api/v1/users/register", data: data, headers: header });

首先在后端App.js头部引入path模块：

const path = require("path");

再将CORS配置调整为仅开发环境启用（生产环境前后端同域无需跨域配置）：

if (process.env.NODE_ENV !== "production") {
  app.use(cors());
}

最后在所有API路由定义的末尾添加生产环境静态资源服务逻辑，适配前端路由：

if (process.env.NODE_ENV === "production") {
  // 托管React build生成的静态文件
  app.use(express.static(path.join(__dirname, "client", "build")));
  // 所有非API请求返回React入口文件，解决前端路由刷新404问题
  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "client", "build", "index.html"));
  });
}

确保后端启动文件（如server.js、App.js）的监听端口使用Heroku分配的动态端口，不要写死固定值：

const PORT = process.env.PORT || 5000; // 本地开发默认用5000端口，部署时自动读取Heroku的环境变量
app.listen(PORT, () => console.log(`服务运行在端口${PORT}`));

在项目根目录的package.json中添加引擎版本声明、启动脚本与Heroku构建钩子：

{
  // 声明Node与npm版本，和本地开发环境保持一致即可，可通过node -v、npm -v查询本地版本
  "engines": {
    "node": "16.x",
    "npm": "8.x"
  },
  "scripts": {
    "start": "node server.js", // 替换为你的后端启动文件实际路径
    "heroku-postbuild": "cd client && npm install && npm run build" // Heroku部署时自动构建前端
  }
}

将本地.env文件中所有用到的环境变量（如数据库连接地址、JWT密钥等），在Heroku后台对应项目的「Settings → Config Vars」页面逐一添加，不要将.env文件提交到Git仓库。

完成以上配置后将代码推送到Heroku即可完成自动构建部署，部署完成后可直接访问Heroku分配的域名测试功能。

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