如何在NextJS 14中从Middleware传递数据到API路由

问题根源 #

你在中间件中创建并修改了Headers对象，但调用NextResponse.next()时未将修改后的headers传入，导致自定义的userId header没有被传递到后续的API路由请求中。

修正后的中间件代码 #

// middleware.ts
export async function middleware(req: NextRequest) {
  const authorization = req.headers.get("authorization");

  if (!authorization) {
    return NextResponse.json({ message: "No Creds" });
  }
  const [, token] = authorization.split(" ");
  try {
    const payload: JWTPayload = await verify(token, supabaseJwtSecret);

    // 复制原请求头并添加自定义userId
    const newHeaders = new Headers(req.headers);
    newHeaders.set("userId", "XXXXXX12345679");

    // 将修改后的headers传递给下一个请求
    return NextResponse.next({
      request: {
        headers: newHeaders,
      },
    });

    // 其他业务代码
  } catch (error) {
    // 处理JWT验证失败的情况
    return NextResponse.json({ message: "Invalid token" }, { status: 401 });
  }
}

修正后的API路由代码 #

API路由中应直接从req对象的headers获取值，而非调用全局的headers()函数（全局headers()适用于Server Components场景）：

// route.ts
export async function GET(req: NextRequest) {
  const cookieStore = cookies();
  const supabase = createRouteHandlerClient({ cookies: () => cookieStore });

  // 从req.headers中提取自定义header
  const userId = req.headers.get("userId");
  console.log(userId); // 现在能正确获取到设置的值
}

额外注意事项 #

• 自定义header建议添加前缀（如x-user-id），避免与标准HTTP header名称冲突
• 确保中间件的matcher配置正确，覆盖到你的目标API路由路径，否则中间件不会触发
• 必须处理JWT验证失败的异常分支，避免未捕获错误导致请求异常

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