Postman请求正常但fetch发送的POST请求后端接收req.body为undefined

问题根因 #

你设置了请求头Content-Type: application/x-www-form-urlencoded，但fetch的body参数直接传入了普通JavaScript对象，fetch不会自动将对象序列化为x-www-form-urlencoded格式的字符串，导致后端无法正确解析请求体参数，所以拿到的是undefined。Postman请求正常是因为你在Postman里填的表单参数会被自动序列化为符合格式的请求体。

修复方案 #

方案1：保持x-www-form-urlencoded格式，序列化请求体 #

把fetch配置里的body替换为URLSearchParams实例，自动完成序列化，无需修改后端代码：

fetch('http://localhost:3001/add-transaction', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    // 替换原对象为URLSearchParams
    body: new URLSearchParams({
        from: formInfo.from,
        to: formInfo.to,
        amount: formInfo.amount,
        fee: formInfo.fee
    })
})

方案2：改用JSON格式传参 #

如果更常用JSON传参，做两处调整即可：

1. 前端修改请求头和body序列化方式：

fetch('http://localhost:3001/add-transaction', {
    method: 'POST',
    headers: {
        // 替换为json格式的Content-Type
        'Content-Type': 'application/json',
    },
    // 将对象序列化为JSON字符串
    body: JSON.stringify({
        from: formInfo.from,
        to: formInfo.to,
        amount: formInfo.amount,
        fee: formInfo.fee
    })
})

2. 确保后端Express服务已经开启JSON解析中间件（在路由定义前配置即可）：

// 你已经配置了cors，新增这行即可
app.use(express.json())

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