Next.js 13 App目录API路由无法解析ReadableStream请求体问题

在Next.js App Router的API路由中，Request对象不会自动解析请求体，这是和Pages Router的核心区别之一，你看到的ReadableStream是原生Web Request API的默认返回，需要手动解析才能拿到JSON数据。

解决步骤 #

1. 在src/app/api/auth/route.js的POST方法中，通过await req.json()异步解析请求体
2. 从解析后的对象中提取address字段

完整代码示例 #

前端fetch请求代码（确保正确设置请求头和数据格式）

fetch('/api/auth', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 必须设置这个请求头
  },
  body: JSON.stringify({ address: '你的地址内容' }) // 必须用JSON.stringify序列化数据
})

后端API路由代码（src/app/api/auth/route.js）

export async function POST(req) {
  // 手动解析JSON请求体，必须添加await处理异步操作
  const body = await req.json();
  console.log(body.address); // 现在可以正确读取address字段
  return new Response(JSON.stringify({ success: true, address: body.address }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

常见排查点 #

• 确认前端请求头Content-Type是否为application/json，未设置会导致后端解析失败
• 确认前端是否用JSON.stringify()处理了请求数据，直接传对象会造成格式错误
• 后端必须使用await调用req.json()，同步调用会拿到Promise而非解析后的实际数据

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