Next.js 13 App Router中如何读取GET请求的请求体？

核心原因 #

HTTP规范里，GET请求的设计目的是获取资源，本身不包含请求体的语义。绝大多数客户端（包括axios）和服务器框架（包括Next.js）都会忽略GET请求的请求体，这就是你看到request.body为null、调用request.json()报错的根本原因。

可行解决方案 #

方案1：改用POST/PUT等支持请求体的HTTP方法（推荐）

这是符合HTTP规范的标准做法，适合传递复杂数据的场景。

后端修改为POST路由处理器：

export async function POST(request: Request) {
  try {
    const data = await request.json();
    console.log(data); // 正常获取 { name: 'john doe' }
    return Response.json({ msg: 'success', data });
  } catch (e) {
    console.log('err', e);
    return Response.json({ msg: 'err' });
  }
}

前端修改为POST请求：

const res = await axios.post('http://localhost:3000/api/finduser', {
  name: 'john doe'
});

方案2：必须用GET时，将数据放在查询参数中

如果业务场景要求必须使用GET请求，可将数据拼接在URL的查询参数里。

前端通过params传递数据：

const res = await axios.get('http://localhost:3000/api/finduser', {
  params: {
    name: 'john doe'
  }
});

后端通过searchParams获取数据：

export async function GET(request: Request) {
  const name = request.nextUrl.searchParams.get('name');
  console.log(name); // 输出 'john doe'
  // 若有多个参数，可转为对象：
  // const allParams = Object.fromEntries(request.nextUrl.searchParams.entries());
  return Response.json({ msg: 'success', name });
}

注意事项 #

不要强行给GET请求加请求体，这种做法不符合HTTP语义，会导致兼容性问题（比如部分CDN、代理服务器会直接丢弃GET的请求体），后续维护也会埋下隐患。

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