NextJS调用外部API前获取HttpOnly Cookie的问题

你的核心问题在于服务器组件和客户端组件获取Cookie的逻辑完全不同，且跨域请求的Cookie传递配置有误，以下分场景给出具体修正方案：

一、服务器组件调用场景 #

服务器组件运行在Node.js环境，不能直接使用浏览器端的Cookie API，cookies-next或Next.js内置API都需要传入服务器上下文才能获取Cookie：

方案1：使用Next.js App Router内置cookies()（推荐） #

修改POST函数，支持传入服务器上下文的Cookie Store：

// ./fetch/POST.ts
import { cookies } from 'next/headers';

export async function POST<T, U>(
  endpoint: string | URL,
  body: U,
  options?: { cookies?: ReturnType<typeof cookies> }
): Promise<T> {
  // 优先用传入的Cookie上下文，否则自动获取服务器端上下文
  const cookieStore = options?.cookies || cookies();
  const token = cookieStore.get('token')?.value;

  const url = new URL(endpoint, 'http://localhost:5000/api/v1');
  const response = await fetch(url, {
    method: "POST",
    mode: "cors",
    cache: "no-cache",
    credentials: "include", // 跨域请求必须设为include才会携带Cookie
    headers: {
      "Content-Type": "application/json",
      ...(token && { "Authorization": `Bearer ${token}` })
    },
    redirect: "follow",
    referrerPolicy: "no-referrer",
    ...options,
    body: JSON.stringify(body)
  });
  return response.json();
}

// 服务器组件中调用示例
import { cookies } from 'next/headers';
import { POST } from './fetch/POST';

async function ServerComponent() {
  const data = await POST('/user/profile', { id: 1 }, { cookies: cookies() });
  // 后续逻辑
}

方案2：兼容cookies-next的服务器端用法 #

如果坚持使用cookies-next，需要在调用时传入服务器端的请求头上下文：

// ./fetch/POST.ts
import { getCookie } from "cookies-next";

export async function POST<T, U>(
  endpoint: string | URL,
  body: U,
  options?: { headers?: Headers }
): Promise<T> {
  const token = getCookie('token', { headers: options?.headers });

  const url = new URL(endpoint, 'http://localhost:5000/api/v1');
  const response = await fetch(url, {
    method: "POST",
    mode: "cors",
    cache: "no-cache",
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
      ...(token && { "Authorization": `Bearer ${token}` })
    },
    redirect: "follow",
    referrerPolicy: "no-referrer",
    ...options,
    body: JSON.stringify(body)
  });
  return response.json();
}

// 服务器组件中调用示例
import { headers } from 'next/headers';
import { POST } from './fetch/POST';

async function ServerComponent() {
  const data = await POST('/user/profile', { id: 1 }, { headers: headers() });
  // 后续逻辑
}

二、客户端组件调用场景 #

客户端组件运行在浏览器环境，有两个核心限制：

1. HttpOnly Cookie无法通过前端JS读取（浏览器安全机制，无法绕过）
2. 跨域请求需要正确配置credentials才能传递Cookie

思路1：HttpOnly Cookie的处理（推荐） #

既然HttpOnly Cookie无法在前端读取，就通过Next.js API路由做转发：

// app/api/proxy/route.ts（Next.js API路由，运行在服务器端）
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const { endpoint, body } = await request.json();
  const token = cookies().get('token')?.value;

  const url = new URL(endpoint, 'http://localhost:5000/api/v1');
  const response = await fetch(url, {
    method: "POST",
    mode: "cors",
    cache: "no-cache",
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
      ...(token && { "Authorization": `Bearer ${token}` })
    },
    body: JSON.stringify(body)
  });

  const data = await response.json();
  return NextResponse.json(data);
}

// 客户端组件中调用示例
'use client';

async function ClientComponent() {
  const handleSubmit = async () => {
    const response = await fetch('/api/proxy', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        endpoint: '/user/profile',
        body: { id: 1 }
      })
    });
    const data = await response.json();
    // 后续逻辑
  };

  return <button onClick={handleSubmit}>提交请求</button>;
}

思路2：非HttpOnly Cookie的处理 #

如果Cookie是非HttpOnly的，确保函数在客户端环境执行，无需传入上下文：

// ./fetch/POST.ts
'use client'; // 标记为客户端执行代码
import { getCookie } from "cookies-next";

export async function POST<T, U>(endpoint: string | URL, body: U, options?: any): Promise<T> {
  const token = getCookie('token'); // 客户端环境直接读取Cookie

  const url = new URL(endpoint, 'http://localhost:5000/api/v1');
  const response = await fetch(url, {
    method: "POST",
    mode: "cors",
    cache: "no-cache",
    credentials: "include", // 跨域必须设为include
    headers: {
      "Content-Type": "application/json",
      ...(token && { "Authorization": `Bearer ${token}` })
    },
    redirect: "follow",
    referrerPolicy: "no-referrer",
    ...options,
    body: JSON.stringify(body)
  });
  return response.json();
}

三、关键配置检查 #

1. Flask端CORS配置：必须允许跨域携带凭证，否则浏览器会拦截Cookie：

   from flask_cors import CORS
   app = Flask(__name__)
   # 允许NextJS域名携带凭证
   CORS(app, supports_credentials=True, origins=["http://localhost:3000"])
   

2. Cookie的Domain/Path设置：Flask设置Cookie时，需确保Domain为localhost、Path为/，否则Cookie不会被NextJS所在域名读取：

   from flask import make_response
   resp = make_response("登录成功")
   resp.set_cookie(
       'token',
       value=jwt_token,
       httponly=True,
       domain='localhost',
       path='/',
       secure=False, # 开发环境设为False，生产环境设为True
       samesite='Lax'
   )
   

内容的提问来源于stack exchange，提问作者Matúš Ravas