NextJS服务端组件Fetch请求对接Express无请求体问题排查

可能原因及解决方案 #

1. Express JSON解析中间件不兼容带charset的Content-Type #

Next.js服务端组件的fetch可能自动为Content-Type头添加charset=utf-8后缀（如application/json; charset=utf-8），而Express默认的express.json()仅匹配严格的application/json类型，导致无法解析请求体。

解决方法：修改Express的JSON中间件配置，使其接受所有application/json类型的请求：

// 替换server.js中的app.use(express.json())
app.use(express.json({ 
  type: /^application\/json(;.+)?$/ 
}));

2. 验证请求体是否被正确发送 #

在Express路由中添加调试代码，查看实际收到的请求头和原始body：

router.post('/', async (req, res) => {
    console.log('Content-Type:', req.get('Content-Type'));
    let rawBody = '';
    req.on('data', chunk => rawBody += chunk.toString());
    req.on('end', () => {
        console.log('Raw Body:', rawBody);
        console.log('Parsed Body:', req.body);
    });
    return res.status(201).json({'status': 'ok', 'booking': null});
});

• 如果原始body为空：检查params是否存在循环引用、未定义值等无法序列化的内容，确保JSON.stringify(params)输出有效字符串
• 如果原始body不为空但解析后为空：确认Express的JSON中间件配置正确

3. 确认路由与端口配置 #

• 确保Express路由/booking正确匹配请求路径
• 确认3000端口仅被Express占用，无其他服务干扰

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