Express应用接收Fetch API发送的JSON格式异常问题

问题出在Fetch请求的写法上，你需要明确设置请求头并序列化JSON数据，具体修正步骤如下：

修正Fetch请求代码 #

发送POST请求时，必须完成两个关键操作：

• 用JSON.stringify()将JS对象转为JSON字符串
• 设置Content-Type: application/json请求头

正确示例代码：

fetch('/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ username: 'your-username', password: 'your-password' })
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

异常原因说明 #

Fetch API不会自动识别并处理JSON格式的请求体：

• 如果直接把JS对象传给body参数，Fetch会将其转换为表单编码格式（类似username=xxx&password=xxx）
• 而Express的express.json()中间件仅处理Content-Type为application/json的请求体，无法解析表单编码数据，最终导致整个字符串被当作单个键，出现你看到的异常结构。

确认Express端配置 #

确保已在Express应用中添加JSON解析中间件（从你的截图看已配置，可再核对）：

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

// 必须添加此中间件解析JSON请求体
app.use(express.json());

// 你的路由示例
app.post('/login', (req, res) => {
  console.log(req.body); // 现在可正常获取解析后的JSON对象
  res.send('请求处理完成');
});

修改后，Fetch发送的请求会和Thunder Client的请求一样被正确解析，无需手动提取字符串再解析。

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