React前端向Express后端发送POST请求无法获取目标数据

你遇到的问题核心在于两个关键错误：前端请求体格式处理不当，以及后端未配置JSON请求体解析逻辑。

1. 前端代码修正 #

你当前的body: JSON.parse(JSON.stringify(data))是错误操作——JSON.stringify(data)已经把对象转为JSON字符串，再用JSON.parse会转回JavaScript对象，而fetch要求请求体是字符串类型，这会导致发送的内容不符合后端预期。同时，Access-Control-Allow-Origin是后端返回的响应头，前端无需在请求头中设置。

修改后的前端代码：

const makePost = (data) => {
    fetch('http://localhost:5000/api', {
        method: 'POST',
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(data) // 直接转为JSON字符串即可
    }).then(function(response){
        return response.text(); // 需要return才能获取响应文本
    }).then(text => {
        console.log(text);
    })
}

2. 后端代码修正 #

Express默认不会自动解析JSON格式的请求体，所以你需要添加express.json()中间件，才能从req.body中拿到前端发送的有效数据，而不是直接打印包含所有请求元数据的req对象（这就是你看到杂乱字段的原因）。另外处理完请求后要返回响应，避免前端请求挂起。

修改后的后端代码：

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

app.use(cors({
  origin: '*'
}));
// 必须在路由前添加JSON解析中间件
app.use(express.json());

app.get('/api', (req,res) => {
  res.json(menuItems);
});

app.post('/api', (req,res) => {
  console.log(req.body); // 现在能拿到前端发送的JSON数据
  res.status(200).json({message: "数据接收成功", receivedData: req.body});
})

app.listen(5000, () => console.log("server started on port 5000"));

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