Next.js13中API路由获取Cookies为空的问题求助

问题原因 #

你的ProfilePage是服务器组件，其中的getData函数在服务器端执行。服务器端发起的fetch请求默认不会自动携带当前请求的Cookies到API路由，而浏览器直接调用API时是客户端请求，会自动带上Cookie，因此出现两种调用方式的结果差异。

解决方案 #

方案一：直接在服务器组件中处理逻辑（推荐） #

既然已经能在服务器组件里通过cookies()拿到token，没必要额外调用API，直接在这里处理数据库查询等业务逻辑即可：

// src/app/profile/page.jsx
import UserDetails from "@/components/UserDetails";
import { cookies } from "next/headers";
import { connectDB } from "@/dbConfig/dbConfig";
// 引入你的用户模型
import User from "@/models/userModel";

connectDB();

async function ProfilePage() {
  const cookieStore = cookies();
  const token = cookieStore.get("token");
  
  let userData = null;
  try {
    // 直接用token查询用户数据，无需调用API（示例逻辑，根据实际业务调整）
    userData = await User.findOne({ token: token.value });
  } catch (error) {
    console.log("Error loading user data", error);
  }

  return (
    <div className="flex flex-col justify-center items-center min-h-screen">
      <h1 className="font-bold text-3xl">Profile page</h1>
      <p className="text-gray-600">This is the profile page</p>
      <UserDetails user={userData} />
    </div>
  );
}

export default ProfilePage;

方案二：若必须调用API路由 #

修改fetch配置，添加credentials: 'include'（同域名下也可用'same-origin'），让服务器端fetch携带当前请求的Cookies：

// src/app/profile/page.jsx 中的getData函数
async function getData() {
  const cookieStore = cookies();
  const token = cookieStore.get("token");
  try {
    console.log(token.value);
    const res = await fetch(`http://localhost:3000/api/users/me`, {
      credentials: 'include', // 关键配置：携带Cookies
    });
    if (!res.ok) {
      throw new Error("Failed to fetch data, please try another time");
    }

    return res.json();
  } catch (error) {
    console.log("Error loading topic", error);
  }
}

另外，你之前尝试通过userToken请求头传递token的方式也可行，但需要在API路由里读取请求头而非Cookies：

// src/api/users/me/route.js
export async function GET(request) {
  try {
    // 读取请求头中的token
    const token = request.headers.get('userToken');
    console.log("Token is: ", token);
    return NextResponse.json({ msg: "success" }, { status: 200 });
  } catch (error) {
    return NextResponse.json(
      { msg: "can't get data", err: error.message },
      { status: 500 }
    );
  }
}

额外说明 #

• Next.js 13的App Router中，组件默认是服务器组件，服务器端执行的代码不会自动在fetch中携带Cookies，需显式配置。
• 如果是客户端组件（添加'use client'指令），fetch默认会自动携带Cookies，无需额外配置。

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