使用react-hook-form提交表单时遭遇Axios 404错误求助

核心原因分析 #

404错误说明前端请求的地址在后端不存在，优先从服务运行状态、路由匹配、请求地址准确性这几个维度排查。

分步排查与解决 #

1. 确认后端服务的实际运行端口 #

你的后端代码设置了const port = process.env.PORT || 5000，意味着如果环境变量PORT有值，服务会使用该端口而非默认的5000：

• 启动后端后，查看控制台输出的Server running on port XXXX，确认实际端口号。
• 如果端口不是5000，将前端Axios请求的URL改成对应端口，比如http://localhost:3001/users。

2. 验证后端路由是否可访问 #

用Postman、curl或浏览器插件直接发送POST请求到后端地址（替换成实际端口）：

curl -X POST -H "Content-Type: application/json" -d '{"name":"test","email":"test@example.com"}' http://localhost:5000/users

• 如果该请求也返回404，说明后端路由存在问题：
  • 检查app.post("/users")的位置，必须放在app.listen()之前（你的代码顺序正确，但要确保没有其他中间件在它之前拦截请求）。
  • 核对路由路径拼写，避免大小写或字符错误（Express路由默认不区分大小写，但尽量保持前后端一致）。
• 如果该请求能正常返回User registered successfully，说明前端请求存在问题，继续下一步。

3. 检查前端请求的实际地址 #

打开浏览器开发者工具的网络面板，找到表单提交时的POST请求：

• 确认请求的URL完全匹配后端路由（比如是否多了/api前缀、端口是否写错）。
• 检查请求方法是否为POST，如果是GET，必然找不到/users的POST路由。
• 排查Axios全局配置，比如是否设置了baseURL导致路径拼接错误：

  // 若有此类配置，需确保请求路径与baseURL拼接后正确
  axios.defaults.baseURL = '/api';
  // 此时应写 axios.post("/users", data)，而非带完整域名，或调整baseURL为"http://localhost:5000"
  

4. 额外检查点 #

• 确认后端服务未崩溃：如果MySQL连接失败，你的代码会直接抛出错误导致服务退出，若控制台能看到Connected to MySQL Database，说明数据库连接正常，服务在运行。
• 跨域问题不会引发404（跨域通常是403或CORS相关错误），你的cors()配置无问题，可排除该因素。

代码优化建议（非404原因，但提升稳定性） #

后端app.post("/users")使用了async关键字，但内部是回调形式的connection.query，async无实际作用，可去掉；同时建议在数据库操作出错时返回500状态码，避免服务崩溃：

app.post("/users", (req, res) => {
  const formData = req.body;
  const sql = "INSERT INTO users SET ?";
  connection.query(sql, formData, (err, result) => {
    if (err) {
      console.error(err);
      return res.status(500).send("Registration failed");
    }
    console.log(result);
    res.send("User registered successfully");
  });
});

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