Next.js 13 Route Handler无法获取Cookie值的问题求助

1. 服务器组件的fetch请求未携带Cookie #

你的Home组件是服务器组件（async函数且无'use client'指令），服务器组件内的fetch是在服务器端发起的，不会自动携带浏览器端的Cookie。此时需要手动将页面组件获取到的Cookie通过请求头传递给API Route：

修改页面组件代码：

export default async function Home() {
  const cookieStore = cookies();
  const accessTokenObj = cookieStore.get("accessToken");
  const refreshTokenObj = cookieStore.get("refreshToken");
  const accessToken = accessTokenObj?.value;
  const refreshToken = refreshTokenObj?.value;

  console.log("Page Component refreshToken : ", refreshToken);
  
  // 手动在请求头中携带Cookie
  const getTestMessage = await fetch("/api/test", {
    headers: {
      Cookie: `accessToken=${accessToken ?? ''}; refreshToken=${refreshToken ?? ''}`
    }
  });

  const data = await getTestMessage.json();
  console.log("getTestMessage : ", data);
}

2. 切换为客户端组件发起请求 #

如果希望请求由浏览器端发起（自动携带Cookie），可将Home组件改为客户端组件，添加'use client'指令并使用useEffect处理异步请求：

'use client';

import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    async function fetchTestData() {
      // 浏览器端发起的fetch会自动携带同域Cookie
      const res = await fetch("/api/test");
      const data = await res.json();
      console.log("getTestMessage : ", data);
    }
    fetchTestData();
  }, []);

  return <div>测试页面</div>;
}

3. 检查Route Handler的依赖导入 #

确保在API Route中正确导入cookies工具：

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

export async function GET(request: NextRequest) {
  const cookieStore = cookies();
  const refreshTokenObj = cookieStore.get("refreshToken");
  console.log("refreshToken : ", refreshTokenObj);
  
  return NextResponse.json({ refreshToken: refreshTokenObj?.value });
}

4. 检查Cookie的SameSite属性 #

若Cookie的SameSite属性设置为Strict，服务器端发起的内部请求可能无法携带该Cookie。可在Cookie设置时将其改为Lax（同域场景下更兼容）：

// 示例：设置Cookie时指定SameSite
response.cookies.set('refreshToken', tokenValue, {
  httpOnly: true,
  sameSite: 'lax',
  path: '/'
});

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