NextJS 13.4：服务器组件调用API无法获取NextAuth Token求助

问题根源 #

服务器组件在服务端渲染阶段发起的fetch请求，默认不会自动携带用户的Cookie信息。而NextAuth的Token存储在Cookie中，因此API路由里的getToken方法拿不到Token，返回null。

反观直接在地址栏访问API、或客户端组件调用API的场景：这些请求都是浏览器端发起的，浏览器会自动带上当前域名的Cookie，因此getToken能正常获取到Token。

解决方案1：服务器组件直接获取Token（推荐） #

服务器组件本身就在服务端运行，没必要通过API路由中转，直接调用NextAuth的getToken方法即可，借助NextJS的cookies()函数获取Cookie上下文：

// /test/page.js
import { getToken } from "next-auth/jwt";
import { cookies } from "next/headers";

const Test = async () => {
  // 直接在服务器组件中获取Token
  const token = await getToken({ cookies: cookies() });
  
  console.log("服务器组件获取到的Token：", token);

  return (
    <div>
      <p>Test Page</p>
      {token && <p>当前用户ID：{token.sub}</p>}
    </div>
  );
};

export default Test;

解决方案2：调用API时手动携带Cookie（若必须走API路由） #

如果业务逻辑必须通过API路由处理，需要在服务器组件的fetch请求中手动添加Cookie头：

// /test/page.js
import { cookies } from "next/headers";

const Test = async () => {
  // 获取当前请求的Cookie集合
  const cookieStore = cookies();
  const res = await fetch("http://localhost:3000/api/test", {
    headers: {
      // 将Cookie转为字符串格式，添加到请求头中
      Cookie: cookieStore.toString()
    }
  });

  const data = await res.json();

  console.log("API返回的数据：", data);

  return (
    <div>
      <p>Test Page</p>
    </div>
  );
};

export default Test;

这样修改后，API路由里的getToken({ req })就能从请求头的Cookie中解析出Token了。

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