如何修复Node.js POST请求中req.body为空对象的错误？

问题核心 #

你的后端已正确配置JSON解析中间件，但前端发送POST请求时未设置正确的Content-Type请求头，导致后端无法识别请求体格式，最终req.body返回空对象。

具体修改方案 #

1. React前端修改 #

在fetch配置中添加Content-Type请求头，明确告知后端请求体为JSON格式：

const onSubmitHandler =(e)=>{
    e.preventDefault(); 
    const place =e.target.place.value ; 
    console.log(place) ; 
    console.log(typeof(place)) ; 
     
    fetch('http://localhost:8080/api/',{
      method:'POST' ,
      // 新增请求头配置
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ place }),
    })
    // 可选：添加响应处理与错误捕获
    .then(res => res.text())
    .then(data => console.log(data))
    .catch(err => console.error(err));
}; 

2. Node.js后端优化（可选） #

Express 4.16+已内置body-parser功能，你当前的express.json()和express.urlencoded()配置足够，可移除冗余的body-parser依赖：

// 移除以下两行冗余代码
// var bodyParser = require('body-parser'); 
// app.use(bodyParser.json());

// 保留现有有效配置
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

3. 额外优化建议 #

• 后端POST接口可返回JSON格式响应，更符合前后端交互规范：

app.post('/api/', (req,res)=>{
    const newPlace = req.body.place; 
    console.log(newPlace); // 现在可正常获取前端传递的值
    placeList.push({ text: newPlace }); // 将新地点加入列表
    return res.json({ success: true, message: '添加成功' });
}); 

• 前端可补充响应处理逻辑，便于排查请求异常。

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