Express.js中req.body为空对象且req.body.name未定义问题求助

我帮你梳理下可能导致后端拿不到React输入框数据的原因，一步步排查应该就能解决：

一、先盯紧前端请求的格式和内容 #

后端已经配置了bodyparser.json()来解析JSON格式的请求体，那前端必须对应发送JSON格式的数据，还要设置正确的请求头，不然后端根本解析不了。

举个正确的React提交示例（用fetch）：

const handleSubmit = async (e) => {
  e.preventDefault();
  // 假设你用useState存输入框的值，或者直接获取DOM值
  const noteContent = document.getElementById('noteInput').value;
  
  try {
    const res = await fetch('/notes', {
      method: 'POST',
      // 这个请求头一定要加！告诉后端我发的是JSON
      headers: {
        'Content-Type': 'application/json',
      },
      // 必须把对象转成JSON字符串，键名要和后端req.body.name对应
      body: JSON.stringify({ name: noteContent }),
    });
    const data = await res.json();
    console.log('提交成功', data);
  } catch (err) {
    console.error('提交出错', err);
  }
};

如果用axios的话会更简单，它默认就是发送JSON：

axios.post('/notes', { name: noteContent })
  .then(res => console.log(res))
  .catch(err => console.error(err));

要是前端没做这两步，后端的req.body大概率是空的。

二、检查后端中间件的注册顺序 #

你代码里的bodyparser中间件是在app.post('/notes')之前注册的，这顺序是对的，但再确认下：有没有把路由定义在中间件之前？比如如果先写了app.post('/notes')再注册bodyparser，那请求到路由的时候还没被解析，自然拿不到数据。

另外，现在Express 4.16+已经集成了body-parser，你可以试试替换成Express自带的解析方式，可能会解决一些兼容性问题：

// 替换原来的bodyparser代码
const express = require('express');
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

三、在后端加日志排查问题 #

你可以在后端路由里先打印请求头和请求体，看看真实的请求情况：

app.post('/notes',function(req,res){
  console.log('请求头信息:', req.headers); // 看Content-Type是不是application/json
  console.log('解析后的req.body:', req.body); // 看是不是空的，或者有没有你要的name字段
  // 后续的数据库操作...
});

通过日志就能知道：是前端根本没发对数据，还是后端没解析到。

四、如果用表单默认提交的情况 #

要是你是用原生表单提交（没有用AJAX），那表单默认会以application/x-www-form-urlencoded格式发送数据，这时候要确保输入框的name属性是name，这样后端的bodyparser.urlencoded({extended: false})才能解析到req.body.name：

<form onSubmit={handleSubmit}>
  <input type="text" name="name" id="noteInput" placeholder="输入笔记" />
  <button type="submit">提交</button>
</form>

但这种情况要注意，表单默认提交会刷新页面，最好还是用AJAX（fetch/axios）的方式提交，体验更好。

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