Next.js 14 App Router：如何将API响应头Set-Cookie写入浏览器Cookie

问题核心原因 #

你的Home组件是服务器组件，执行getMainData时的fetch请求在服务器端发起，API返回的set-cookie响应头仅作用于服务器端请求上下文，浏览器完全无法感知，因此不会自动设置Cookie。

方案一：改用客户端组件调用API（推荐） #

将Home组件转为客户端组件，让fetch在浏览器端执行，浏览器会自动处理set-cookie（前提是跨域配置符合要求）。

修改Home组件 #

添加'use client'指令转为客户端组件：

'use client';

import { getMainData } from "@/api/server";

export default async function Home() {
  const response = await getMainData();

  return (
    <div>
      Home Data
    </div>
  );
}

确保API的CORS配置正确 #

API服务器必须返回以下响应头：

• Access-Control-Allow-Origin: 你的前端域名（不能是*，否则无法携带凭证）
• Access-Control-Allow-Credentials: true

满足以上条件后，浏览器会自动解析set-cookie并将Cookie设置到本地。

方案二：服务器端传递Cookie到客户端手动设置（仅适用于非HttpOnly Cookie） #

如果必须保留服务器组件，需要从服务器端提取set-cookie并传递到客户端手动设置。注意：此方法无法设置HttpOnly标记的Cookie（浏览器安全限制）。

步骤1：修改API函数，提取并返回set-cookie #

import { BASE_URL } from "@/lib/constants";
export async function getMainData() {
  try {
    const _res = await fetch(`${BASE_URL}/main/data/`, {
      method: "GET",
      credentials: "include",
      mode: "cors",
    });

    // 提取所有set-cookie值
    const setCookies = _res.headers.getSetCookie();

    const _data = await _res.json();

    return {
      response: _data,
      setCookies,
    };
  } catch (error) {
    return {
      response: error,
      setCookies: [],
    };
  }
}

步骤2：创建客户端组件用于设置Cookie #

'use client';

import { useEffect } from 'react';

export default function CookieSetter({ cookies }) {
  useEffect(() => {
    cookies.forEach(cookie => {
      // 直接写入document.cookie，浏览器会自动解析Cookie属性
      document.cookie = cookie;
    });
  }, [cookies]);

  return null;
}

步骤3：在服务器组件中引入并传递Cookie #

import { getMainData } from "@/api/server";
import CookieSetter from "@/components/CookieSetter";

export default async function Home() {
  const { response, setCookies } = await getMainData();

  return (
    <div>
      Home Data
      <CookieSetter cookies={setCookies} />
    </div>
  );
}

关键注意事项 #

• HttpOnly Cookie无法通过客户端JavaScript操作，只能由浏览器自动处理，因此这类Cookie必须使用方案一实现。
• 跨域场景下，API服务器的CORS配置必须严格符合要求，否则浏览器会拦截Cookie设置。

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