Next.js 13 API请求报错：TypeError: 无法读取undefined的'headers'属性

错误原因 #

你的/api/register路由处理函数中，userPool.signUp采用回调式异步调用，但外层的POST是async函数：

• 回调函数内的return NextResponse.json(...)不会作为POST函数的返回值
• POST函数在调用signUp后直接执行完毕，返回undefined
• Next.js 尝试读取返回值的headers属性时，因undefined触发TypeError

修复方案 #

将回调式的signUp包装为Promise，通过async/await等待异步操作完成，确保POST函数返回有效的NextResponse对象。

修改后的服务端代码（route.ts） #

import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const json = await request.json();
  // ... 你的其他逻辑（比如创建attributeList）

  // 把回调式signUp转换为Promise
  const signUpPromise = new Promise((resolve, reject) => {
    userPool.signUp(json.email, json.password, attributeList, null, (err, result) => {
      if (err) reject(err);
      else resolve(result);
    });
  });

  try {
    const result = await signUpPromise;
    // 明确设置HTTP状态码，同时返回响应体
    return NextResponse.json(
      { status: "200", data: result.user },
      { status: 200 }
    );
  } catch (err) {
    // 捕获错误并返回对应状态码与信息
    return NextResponse.json(
      { status: "fail", message: err instanceof Error ? err.message : "注册失败" },
      { status: 400 }
    );
  }
}

客户端代码优化（可选） #

客户端可以保持原逻辑，但建议在catch中更精准处理错误：

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

    if (!response.ok) {
      const errData = await response.json();
      throw new Error(errData.message || "注册请求失败");
    }

    const data = await response.json();
    setMessage("User created successfully");
    setConfirmationActive(true);
  } catch(e){
    setMessage(e.toString());
  }
};

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