Express接收HTML注册页请求时req.body为空，Postman请求正常

问题现象 #

通过HTML注册页面发送POST请求到Express的/api/register接口时，控制台打印req.body为空对象{}；但使用Postman调用该接口时，req.body能正常获取到提交的参数（如name、email、password）。

核心原因及修复方案 #

1. Fetch请求头拼写错误（关键问题） #

前端Script.js中，fetch配置里的请求头字段写成了单数header，正确的应该是复数headers。这个错误导致Content-Type: application/json没有被正确设置，Express的express.json()中间件无法识别请求体格式，因此解析为空。

修复后的前端代码：

async function registerUser(event){
   event.preventDefault()
   const username = document.getElementById('username').value
   const email = document.getElementById('userEmail').value
   const password = document.getElementById('password').value

   const result = await fetch('/api/register', {
      method: 'POST',
      // 修正：header -> headers
      headers: {
         'Content-Type': 'application/json'
      },
      body: JSON.stringify({
         username, email, password
      })
   }).then((res)=> res.json())

   console.log(result)
}

2. 参数名匹配问题（可选调整） #

从Postman的日志可以看到，后端接收的参数是name，但前端当前传的是username。如果后端业务逻辑需要name字段，需要将前端的参数名统一：

body: JSON.stringify({
   name: username, // 把username改为name，和后端预期字段一致
   email, 
   password
})

3. 后端中间件顺序验证 #

确保Server.js中，请求体解析中间件(express.json()、express.urlencoded())挂载在路由之前，否则中间件无法生效：

const app=express();

// 先配置解析中间件，再处理其他逻辑
app.use(express.json());
app.use(express.urlencoded({ extended: true}));

// 日志、静态资源、路由等后续配置
app.use(morgan('dev'));
// ... 其他静态资源配置
app.post('/api/register', async (req, res)=>{
    console.log(req.body);
    res.json({status: 'ok'})
})

额外检查项 #

• 确认HTML表单输入框的ID和前端脚本中获取的ID完全一致（如username、userEmail、password）。
• 在浏览器开发者工具的Network面板中查看请求详情：
  • 检查请求头是否包含Content-Type: application/json。
  • 查看Request Payload是否正确携带了提交的参数。

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