使用React Fetch发送POST请求，Node/Express后端返回空对象？

兄弟，我刚踩过一模一样的坑！先给你上修正后的代码，再给你拆解问题出在哪：

修正后的React请求代码 #

handleSubmit(e) { 
  e.preventDefault(); 
  const { email } = this.state; 
  fetch('/api/login', { 
    method: 'POST', 
    headers: { 'Content-Type':'application/json' }, 
    // 重点1：把JS对象转成JSON字符串
    body: JSON.stringify({ "email": email }) 
  })
  // 重点2：处理Fetch返回的Promise
  .then(res => res.json())
  .then(data => {
    console.log("后端返回的数据：", data);
    // 这里可以加登录成功后的逻辑，比如跳转到首页、存token
  })
  .catch(err => {
    console.error("请求出错啦：", err);
  }); 
  console.log("当前输入的邮箱：", email) 
}

问题根源拆解 #

你的后端代码是没问题的（Postman能正常返回就说明body-parser配置正确），问题全在React的Fetch请求里：

1. 忘记序列化请求体 #

当你设置headers: { 'Content-Type':'application/json' }时，后端的bodyParser.json()是专门解析JSON格式字符串的，但你直接传了一个JS对象{ "email": email }。Fetch会把这个对象默认转成[object Object]这种无效字符串，后端根本解析不出内容，自然只能拿到空对象{}。

用JSON.stringify()把JS对象转成标准JSON字符串，后端就能正常解析了。

2. 未处理Fetch的Promise链 #

Fetch API是异步的，返回的是一个Promise对象。如果不通过.then()链式调用处理这个Promise，不仅拿不到后端返回的数据，还可能导致请求没有完整执行（比如某些浏览器会因为Promise未处理而中断请求）。加上.then()既能处理响应数据，还能通过.catch()捕获请求过程中的错误，方便你调试。

验证方法 #

你可以打开浏览器的开发者工具（F12 → Network标签），查看这次POST请求的Payload：

• 修正前：Payload显示[object Object]
• 修正后：Payload显示正确的JSON字符串{"email": "你输入的邮箱地址"}

这时候再看后端控制台，console.log(req.body)就能正常打印出邮箱数据啦！

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