Next.js App Router边缘函数如何获取POST请求提交的数据？

你看到的ReadableStream是因为request.body本身就是一个可读流，并非直接的请求数据，需要通过异步方法解析后才能拿到实际内容。

修正后端API代码 #

在app/api/route.ts中，使用request.json()方法解析JSON格式的请求体：

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  // 解析JSON请求体
  const data = await request.json();
  console.log(data); // 此时会输出 { email: 'mine@gmail.com' }
  return NextResponse.json({
    name: `Gafer`,
  });
};

补充说明 #

1. 为什么要使用await request.json()？
   HTTP请求的body是以流的形式传输的，Request对象提供了json()、text()、formData()等方法，用于异步读取并解析不同格式的请求体内容。你发送的是JSON字符串，所以用json()最合适。

2. 前端请求优化（可选）
   虽然fetch在传入JSON.stringify()的body时会自动设置Content-Type: application/json，但显式声明请求头可以避免潜在的解析问题：

const Component = () => {
  React.useEffect(() => {
    (async function() {
       const res = await fetch('/api', { 
         method: 'POST', 
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({ email: 'mine@gmail.com' })
       });
       const json = await res.json();
    })()
  }, []);
}

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