Next.js 13.4.6发送POST请求时出现TypeError：无法读取headers属性

1. 核心问题：API路由写法不符合App Router规范 #

Next.js 13的App Router和Next.js 12的Pages Router在API路由实现上完全不同，若沿用旧写法会导致请求对象未定义，触发Cannot read properties of undefined (reading 'headers')错误。

错误写法（Next.js 12风格）： #

// app/api/register/route.js
export default function handler(req, res) {
  const headers = req.headers; // 此处req为undefined，直接报错
  // ...其他逻辑
}

正确写法（Next.js 13 App Router风格）： #

必须导出对应HTTP方法的异步函数，参数为request对象：

// app/api/register/route.js
export async function POST(request) {
  // 获取请求头
  const headers = request.headers;
  // 获取JSON格式的请求体
  const body = await request.json();
  // 处理注册逻辑...
  return new Response(JSON.stringify({ message: "注册成功" }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

2. 客户端请求的正确姿势 #

客户端页面需确保请求路径、格式符合要求，同时注意组件类型：

客户端组件请求示例： #

// app/register/page.js
'use client'; // 必须添加，标识为客户端组件

export default function RegisterPage() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const userData = Object.fromEntries(formData);

    try {
      const response = await fetch('/api/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(userData),
      });

      const result = await response.json();
      console.log(result);
    } catch (error) {
      console.error('请求失败:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" placeholder="用户名" required />
      <input type="password" name="password" placeholder="密码" required />
      <button type="submit">注册</button>
    </form>
  );
}

关键注意事项： #

• 客户端组件必须加'use client'指令，默认服务器组件无法使用fetch。
• 请求路径为/api/register，而非/app/api/register，客户端请求基于域名根路径。
• 若发送JSON数据，需设置Content-Type: application/json并将body转为JSON字符串；若用FormData则无需手动设置该请求头。

3. 额外排查点 #

• 确认API路由文件路径正确：必须放在app/api/[路由名]/route.js，文件名固定为route.js。
• 检查API路由中是否误写变量名，比如把request写成req导致解构时读取undefined的headers。

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