Heroku部署React应用表单跳转本地端口问题求助

你遇到的核心问题是表单action硬编码本地地址，以及前后端服务在Heroku环境下的协同配置问题。下面是具体的修改步骤，帮你解决提交跳转和端口依赖的问题：

1. 修改表单的Action路径（contact.js） #

把表单的action从硬编码的http://localhost:2000/post-feedback改成相对路径/post-feedback，这样不管部署在哪里，都会自动匹配当前域名的API接口：

<form className="form-style" method="POST" action="/post-feedback" >

2. 修正Node服务的静态文件配置（db.js） #

你当前的代码里有一行错误的静态文件配置，会导致资源加载混乱，需要直接删除：

// 删掉这行无效配置！
app.use(express.static(path.resolve(__dirname, "src/components/contact.js")));

这行代码试图把单个JS文件作为静态资源目录，完全没必要——你的production环境已经配置了托管src/build的静态文件，足够覆盖前端页面的访问需求。

3. 优化表单提交后的跳转逻辑（db.js） #

当前用HTML脚本做跳转的方式不够优雅，还可能和React单页应用的路由冲突。建议直接用res.redirect跳转到首页，同时完善数据库操作的错误处理：

app.post("/post-feedback", function(req, res) {
  console.log("Received feedback:", req.body);
  dbConn.then(function(db) {
    delete req.body._id;
    db.collection("feedbacks").insertOne(req.body)
      .then(() => {
        // 插入成功后直接重定向到首页
        res.redirect("/");
      })
      .catch(err => {
        console.error("Insert error:", err);
        res.status(500).send("Failed to submit feedback, please try again later.");
      });
  });
});

这样用户提交后会直接回到你的React首页，避免了脚本跳转的兼容性问题。

4. 修正package.json的启动脚本 #

Heroku需要启动你的Node后端服务，而不是React的开发服务器。所以要修改start脚本，同时调整heroku-postbuild的路径：

"scripts": {
  "start": "node db.js", // 改为启动Node后端服务
  "dev": "react-scripts start", // 保留dev脚本用于本地开发
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "heroku-postbuild": "npm install && npm run build" // 去掉cd src，直接在根目录执行
},

heroku-postbuild里的cd src是错误的，因为你的package.json在根目录，直接执行npm run build就会生成正确的build文件夹。

5. 本地开发的兼容处理（可选） #

如果本地开发时需要同时跑React和Node服务，可以在React项目的package.json里加一行代理配置：

"proxy": "http://localhost:2000"

这样本地开发时，表单提交的/post-feedback会自动代理到localhost:2000，不需要修改代码就能在本地和Heroku上都正常运行。

做完这些修改后，重新部署到Heroku，表单就能正常提交数据到MongoDB，并且提交后自动跳转到首页了。

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