发送JSON payload的fetch请求后端req.body为空，Postman请求正常

我之前也碰到过一模一样的坑！核心原因其实很直白：你的前端fetch请求没设置正确的Content-Type请求头，而后端的解析逻辑（比如Express的express.json()中间件）只有识别到这个头时，才会自动把请求体解析成JSON对象。

为什么Postman能正常工作？ #

Postman在你选择发送JSON格式请求时，会自动帮你加上Content-Type: application/json这个请求头。后端看到这个头，就知道要把请求体按JSON格式解析，所以能拿到正确的数据。

前端代码的修改点 #

你的当前代码只指定了请求方法和body，但没告诉后端这个body是JSON格式的。只需要给requestOptions添加上headers配置就行：

let raw = JSON.stringify({"name":"James","favourite":"books"})
var requestOptions = { 
  method: 'POST', 
  body: raw,
  // 新增这行，明确告诉后端请求体是JSON类型
  headers: { 'Content-Type': 'application/json' }
};
let send = () => {
 fetch("http://mywebsite.herokuapp.com/send", requestOptions)
 .then(response => response.text())
 .then(result => console.log(result))
 .catch(error => console.log('error', error));
}

后端的额外检查 #

另外要确认你的Express后端已经配置了express.json()中间件——没有这个中间件的话，就算前端加了请求头，后端也没法解析JSON请求体：

const express = require('express');
const app = express();

// 必须在路由之前配置这个中间件，用于解析JSON请求体
app.use(express.json());

app.post('/send', (req, res) => { 
  console.log(req.body); // 现在应该能正常拿到{"name":"James","favourite":"books"}了
  res.send('请求已接收');
});

这样修改后，前端发送的请求就和Postman的请求完全一致了，后端就能正确获取到请求体里的JSON数据啦！

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