Express中使用Fetch发送FormData时req.body为空的问题

问题场景 #

我在Express应用里尝试用前端Fetch API结合FormData发送POST请求，发现用JSON格式发送时后端能正常接收req.body，但换成FormData后req.body就变成空对象了，具体代码如下：

后端app.js配置

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

路由代码

exports.post_endpoint = async(req, res)=>{
    console.log('req.body = ', req.body);
    res.send({        
        test: 'test'
    });
};

正常工作的JSON请求（前端）

fetch(url, {  
    method: 'post',
    headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN':"MY-CSRF-TOKEN"},
    body: JSON.stringify({ "user": {
      "email" : 'test1',
      "password" : 'test2'
    }}),
})

控制台输出：req.body = { user: { email: 'test1', password: 'test2' } }

FormData请求（前端），此时req.body为空

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

fetch(url, {
    method: 'post',
    headers: {
        "Content-Type": "multipart/form-data"
        ,'X-CSRF-TOKEN':"MY-CSRF-TOKEN"
    },
    body: formData
})

控制台输出：req.body = {}

问题原因 #

核心问题有两个：

1. body-parser不支持multipart/form-data格式：你当前用的bodyParser.json()和bodyParser.urlencoded()只能处理JSON和application/x-www-form-urlencoded格式的请求体，没法解析multipart/form-data（也就是FormData对应的格式）。
2. 手动设置Content-Type头出错：当你用Fetch发送FormData时，手动指定"Content-Type": "multipart/form-data"会丢失自动生成的边界标识符（boundary），后端没法正确解析请求体，这也是导致req.body为空的关键原因之一。

解决方案 #

要解决这个问题，我们需要用multer来处理multipart/form-data格式的请求，同时修正前端的请求头设置：

1. 安装multer

首先在项目里安装multer：

npm install multer

2. 修改后端配置

更新你的app.js，引入multer并在对应的路由上使用upload.none()（这个方法表示我们只处理文本字段，不处理文件上传）：

const multer = require('multer');
const path = require('path');
const upload = multer({ dest: path.join(__dirname, 'uploads') }); // 指定临时文件存储路径（即使不用文件上传也需要配置）

// 在路由中添加upload.none()中间件
app.post('/endpoint', upload.none(), my_router.post_endpoint);

3. 修正前端请求

去掉手动设置的"Content-Type": "multipart/form-data"，Fetch会自动为FormData请求添加正确的Content-Type头（包含boundary）：

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

fetch(url, {
    method: 'post',
    headers: {
        'X-CSRF-TOKEN':"MY-CSRF-TOKEN" // 只保留CSRF头即可
    },
    body: formData
})

这样修改后，后端的req.body就能正常获取到FormData里的字段了，比如会输出：req.body = { key1: 'value1', key2: 'value2' }

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