Postman请求正常但fetch()调用失败，求问题排查与解决方法

兄弟，我一眼就看出你问题出在哪了——请求头的Content-Type和请求体的格式完全不匹配！这就是为啥Postman能正常工作，但fetch()调用失败的核心原因。

你的错误根源 #

你设置的Content-Type是application/x-www-form-urlencoded，这告诉后端“我传的是表单格式的数据（类似name=xxx&rating=yyy）”，但你实际传的内容和这个格式完全不搭：

• 用JSON.stringify()时，后端收到的是把整个JSON字符串当成了一个键（比如{"name":"IngleburtHumperdink","rating":10}），值为空，所以req.body里根本没有name和rating字段；
• 去掉JSON.stringify()直接传对象时，fetch会把对象默认转换成[object Object]这个字符串，同样不符合表单格式，后端还是解析不到正确的字段。

两种正确的解决方案 #

方案1：用JSON格式传递数据（推荐）

这种方式更适合传递复杂对象，也是现在前后端交互的主流方式：

• 客户端代码修改：把Content-Type改成application/json，保持JSON.stringify()处理body：

fetch('http://localhost:1234/acts/create', { 
  method: 'POST', 
  headers: { "Content-Type": "application/json", }, 
  body: JSON.stringify({ name: 'BARNEY MCGREW!', rating: 90 }) 
})

• 后端配置：Express默认不会解析JSON格式的请求体，所以要在路由之前添加JSON解析中间件：

// 放在你的路由注册代码之前
app.use(express.json());

方案2：用表单格式传递数据

如果一定要用application/x-www-form-urlencoded，需要把请求体转换成表单编码格式：

• 客户端代码修改：用URLSearchParams来构建body：

const formData = new URLSearchParams();
formData.append('name', 'BARNEY MCGREW!');
formData.append('rating', 90);

fetch('http://localhost:1234/acts/create', { 
  method: 'POST', 
  headers: { "Content-Type": "application/x-www-form-urlencoded", }, 
  body: formData
})

• 后端配置：确保添加了表单解析中间件：

// 放在路由注册之前，extended: true支持解析复杂对象
app.use(express.urlencoded({ extended: true }));

关于Postman能工作的原因 #

Postman在你选择请求格式时，会自动帮你匹配对应的Content-Type：比如你选了Raw JSON，它会自动设置Content-Type: application/json；选了Form Data，会设置成表单格式的头。而你自己写fetch代码时，手动指定了不匹配的头和请求体，所以出问题了。

优质学习资源推荐 #

• MDN的Fetch API官方文档：里面详细讲解了fetch请求体的各种传递方式，包括JSON、表单、FormData、Blob等场景，重点看请求体编码与Content-Type的匹配规则；
• 前端技术博客中专注HTTP请求的文章：可以搜索“fetch请求体格式”“Content-Type对应编码”这类主题，找那些带代码示例的实战文章，能快速帮你理清不同格式的使用场景。

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