React与Node.js数据交互：fetch请求404错误及路由配置疑问

问题根源 #

直接在浏览器地址栏访问localhost:5000/store-data时，浏览器发起的是GET请求，但你最初只定义了app.post("/store-data")的路由——后端找不到对应GET请求的处理逻辑，返回404是完全符合HTTP路由匹配规则的正常现象，不是代码bug。

你添加的app.get路由其实毫无意义：GET请求本身没有请求体，req.body.username必然是undefined，控制台打印的内容也不会有有效数据，只是让你访问时不显示404页面而已，完全不符合接口设计逻辑。

正确处理方式 #

方案1：保留POST接口即可（推荐） #

如果这个接口只是用来接收前端表单提交的POST数据，不需要支持GET访问，直接删掉多余的app.get路由就行。只要前端的POST请求能正常发送数据、后端能正确打印req.body内容，就说明接口功能正常，404是合理的——这个接口本来就不是给用户直接在浏览器里访问的。

方案2：添加友好的GET提示（可选） #

如果想让误访问的用户知道这个接口的正确用法，可以写一个简单的GET路由，返回规范的提示信息：

app.get("/store-data", (req, res) => {
  res.status(405).json({ message: "该接口仅接受POST请求，请通过前端表单提交数据" });
});

使用405 Method Not Allowed状态码，能明确告诉客户端当前请求方法不被允许，比返回普通的"Hello"更符合HTTP规范。

额外注意 #

确保你的Node.js后端已经配置了解析JSON请求体的中间件，否则req.body会是undefined。在所有路由定义之前添加：

const express = require('express');
const app = express();

// 解析JSON请求体
app.use(express.json());

// 之后再定义你的POST路由
app.post("/store-data", (req, res) => {
  let data = { name: req.body.username };
  console.log(data.name);
  console.log(JSON.stringify(req.body));
  res.json("Hello");
});

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