Next.js 13 API路由POST请求无法获取正确数据问题排查

你的Next.js API路由无法获取POST数据的核心原因有两个：

• Next.js App Router的API请求对象中，request.body是ReadableStream类型，不是直接可解析的JSON数据，直接await它只能得到流对象，所以第一个console会输出[object Object]。
• 可读流只能被读取一次，你连续两次await request.body，第二次读取时流已经被耗尽，所以解析不到任何数据，导致第二个console输出{}。

修复后的API路由代码 #

import { NextResponse } from 'next/server';

export async function POST(request) {
    // 用request.json()解析JSON格式的请求体，这是正确的方式
    const { email, password } = await request.json();
    console.log(`Posted data is:`, { email, password });
    
    // 此处可添加与Django后端通信的逻辑
    // const djangoRes = await fetch('你的Django后端登录接口地址', {
    //     method: 'POST',
    //     headers: {
    //         'Content-Type': 'application/json'
    //     },
    //     body: JSON.stringify({ email, password })
    // });
    // const djangoData = await djangoRes.json();

    return NextResponse.json({ email, password });
}

额外说明 #

• 前端的fetch代码是正常的，你已经正确设置了Content-Type: application/json并将数据序列化为JSON字符串，无需修改。
• 若需处理其他格式的请求体（如form-data），可替换为request.formData()这类对应解析方法。

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