Next.js服务组件调用API无法获取accessToken Cookie问题

核心问题 #

1. API路由参数冗余：GET函数不需要额外的response参数，Next.js App Router的路由处理器仅接收request参数。
2. Cookie获取方式问题：cookieStore.get("accessToken")返回的是包含name和value的对象，直接返回会导致token字段是整个对象而非实际token值；若Cookie不存在，theme会是undefined。
3. 服务器组件Fetch未携带Cookie：服务器组件运行在服务端，默认Fetch调用不会自动传递客户端的Cookie到API接口，导致API路由无法获取到目标Cookie。

修复步骤 #

1. 修正getAccessToken路由处理器 #

import { NextResponse } from "next/server";
import { cookies } from "next/headers";

// 移除多余的response参数，仅保留request
export async function GET(request: Request) {
  const cookieStore = cookies();
  // 获取Cookie对象，提取value；若不存在则设为null
  const accessTokenCookie = cookieStore.get("accessToken");
  const token = accessTokenCookie ? accessTokenCookie.value : null;
  
  return NextResponse.json({ token, message: "hello" });
}

2. 修复服务器组件的Cookie获取逻辑 #

方案一：直接在服务器组件中获取Cookie（更高效，无需调用API）

服务器组件本身可以直接访问cookies()，无需通过API中转：

"use server";

import { cookies } from "next/headers";
import React from "react";

const page = async () => {
  const cookieStore = cookies();
  const accessToken = cookieStore.get("accessToken")?.value || null;
  console.log("accessToken >> ", accessToken);
  
  return <div>HOME PAGE!</div>;
};

export default page;

方案二：若必须调用API，需在Fetch中传递Cookie

如果一定要通过API接口获取，需要在Fetch请求中携带当前请求的Cookie：

"use server";

import { cookies } from "next/headers";
import React from "react";

const page = async () => {
  const cookieStore = cookies();
  // 获取当前请求的Cookie字符串
  const cookieHeader = cookieStore.toString();
  
  const response = await fetch("http://localhost:3000/api/getaccessToken", {
    headers: {
      Cookie: cookieHeader, // 手动传递Cookie头
    },
  });

  if (response.ok) {
    const data = await response.json();
    console.log("data >> ", data);
  }
  
  return <div>HOME PAGE!</div>;
};

export default page;

验证要点 #

• 确保客户端确实存在名为accessToken的Cookie（可在浏览器开发者工具的Application面板查看）。
• 若使用方案二，注意Fetch的credentials选项在服务端Fetch中不生效，必须手动传递Cookie头。

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