React使用fetch API向Node.js服务器传数据时req.body为空问题

核心错误出在React的fetch配置里：header拼写错误，应该是复数形式headers。这个错误导致请求没有正确设置Content-Type头，后端的express.json()中间件无法识别请求体为JSON格式，因此不会解析，最终req.body为空。

修复后的React代码 #

import './App.css';

function App() {

  function handleClick() {
    // Send data to the backend via POST
    fetch('http://localhost:8000/message', {  
      method: 'POST', 
      // 修正：header → headers
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({name:"ROHIT"})
    })
  }

  return (
    <div className="App">
      TO DO App by Rohit Satpute
      <button onClick={handleClick}>
        Send data to backend
      </button>
    </div>
  );
}

export default App;

后端代码确认 #

你的Node.js后端代码是正确的：

• 已经通过app.use(express.json())启用了JSON请求体解析中间件
• 配置了cors()解决跨域问题

修复后，前端请求会正确携带Content-Type: application/json头，后端就能正常解析req.body，控制台会输出{ name: 'ROHIT' }。

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