Next.js 13服务端组件中如何获取Cookie？

Next.js 13的服务端组件运行在服务器环境，没有浏览器的document对象，所以document.cookie无法使用。以下是几种获取并传递Cookie的实用方案：

1. 服务端组件直接使用Next.js内置cookies() API（推荐） #

Next.js App Router 提供了next/headers中的cookies()函数，专门用于在服务端组件中获取请求携带的Cookie。

代码示例：

import axios from "axios";
import { cookies } from "next/headers";

// 在服务端组件内创建axios实例并配置
const Api = axios.create({
  baseURL: "http://127.0.0.1:5000",
});

// 获取指定Cookie（替换成你的Authorization对应的cookie键名）
const authCookie = cookies().get("auth_token")?.value;
if (authCookie) {
  // 配置Authorization头
  Api.defaults.headers.common["Authorization"] = `Bearer ${authCookie}`;
  // 如果后端需要直接传递Cookie头，可改用这行：
  // Api.defaults.headers.common["Cookie"] = `auth_token=${authCookie}`;
}

注意：cookies()仅能在服务端组件、服务端路由处理函数中调用，不能用于客户端组件。

2. 从客户端组件传递Cookie到服务端组件 #

如果业务需要从客户端传递Cookie到服务端组件，可在客户端组件中用document.cookie获取后，通过props传递。

示例：

• 客户端组件（需添加'use client'指令）：

'use client';

import ServerComponent from './ServerComponent';

export default function ClientComponent() {
  // 解析客户端Cookie
  const authCookie = document.cookie.split('; ')
    .find(row => row.startsWith('auth_token='))
    ?.split('=')[1];
  
  return <ServerComponent authCookie={authCookie} />;
}

• 服务端组件：

import axios from "axios";

export default function ServerComponent({ authCookie }) {
  const Api = axios.create({
    baseURL: "http://127.0.0.1:5000",
  });

  if (authCookie) {
    Api.defaults.headers.common["Authorization"] = `Bearer ${authCookie}`;
  }

  // 后续使用Api发起请求
  return <div>服务端组件内容</div>;
}

⚠️ 注意：仅适合非敏感Cookie，敏感信息通过客户端传递存在XSS风险，需谨慎使用。

3. 在服务端路由中处理Cookie并转发请求 #

如果API请求是在Next.js的服务端路由（如app/api/xxx/route.js）中发起，可直接在路由内获取Cookie，再转发给后端：

import { cookies } from "next/headers";
import axios from "axios";

export async function GET() {
  const authCookie = cookies().get("auth_token")?.value;
  const response = await axios.get("http://127.0.0.1:5000/api/data", {
    headers: {
      Authorization: `Bearer ${authCookie}`,
      // 或者直接传递完整Cookie头
      Cookie: `auth_token=${authCookie}`
    }
  });

  return Response.json(response.data);
}

前端（客户端/服务端组件）直接调用这个Next.js API路由即可，无需自行处理Cookie。

内容的提问来源于stack exchange，提问作者José Lisboa