如何在Next.js 13服务端组件中携带HttpOnly Cookie请求外部后端？

核心问题分两种场景处理，取决于你的Next.js应用和外部后端是否同域/共享主域：

场景1：Next.js与外部后端同域/共享主域 #

这种情况下，服务端组件完全可以获取并携带HttpOnly Cookie，你遇到的生产环境无效问题大概率是Cookie的配置有误，导致浏览器未将Cookie发送至Next.js服务器。

步骤1：检查Cookie的生产环境配置 #

确保Cookie满足以下要求：

• Domain：设置为共享的主域（比如Next.js是app.yourdomain.com，后端是api.yourdomain.com，则Domain设为.yourdomain.com）
• Path：设为/，确保所有路径请求都携带Cookie
• Secure：生产环境必须设为true，仅在HTTPS下传输Cookie
• SameSite：根据跨域需求设为Lax（同域/子域场景推荐）或None（跨域场景需配合Secure）

步骤2：服务端组件中正确传递Cookie #

在服务端组件中通过cookies()获取Cookie，然后构建符合标准的Cookie请求头发送给外部后端：

import { cookies } from 'next/headers';

const HomePage = async () => {
  const cookieStore = cookies();
  const cookieEntries = [];
  
  // 获取需要的Cookie并拼接成标准格式
  const accessToken = cookieStore.get('accessToken')?.value;
  const refreshToken = cookieStore.get('refreshToken')?.value;
  
  if (accessToken) cookieEntries.push(`accessToken=${accessToken}`);
  if (refreshToken) cookieEntries.push(`refreshToken=${refreshToken}`);

  try {
    const response = await fetch('https://your-external-backend.com/api/data', {
      method: 'GET',
      headers: {
        ...(cookieEntries.length > 0 && { 'Cookie': cookieEntries.join('; ') }),
        // 可添加其他必要请求头，比如Content-Type
      },
    });

    const data = await response.json();
    // 处理返回数据
  } catch (err) {
    // 错误处理逻辑
  }

  return (
    <div>
      {/* 页面渲染内容 */}
    </div>
  );
};

export default HomePage;

场景2：Next.js与外部后端为不同域名 #

这种情况下，服务端组件无法获取到外部后端的HttpOnly Cookie——因为Cookie是绑定到后端域名的，浏览器不会将后端域名下的Cookie发送给Next.js服务器。此时必须使用客户端组件，依赖浏览器的自动Cookie携带机制：

客户端组件实现示例 #

'use client';

import { useEffect, useState } from 'react';

const HomePage = () => {
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    const fetchBackendData = async () => {
      try {
        const response = await fetch('https://external-backend-domain.com/api/resource', {
          method: 'GET',
          credentials: 'include', // 关键：告诉浏览器携带目标域名的Cookie
        });

        if (!response.ok) throw new Error('请求失败');
        const data = await response.json();
        setApiData(data);
      } catch (err) {
        console.error('请求错误:', err);
      }
    };

    fetchBackendData();
  }, []);

  return (
    <div>
      {apiData ? (
        <div>获取到的数据：{JSON.stringify(apiData)}</div>
      ) : (
        <div>加载中...</div>
      )}
    </div>
  );
};

export default HomePage;

后端CORS配置要求 #

外部后端必须配置以下CORS规则，否则浏览器会阻止携带Cookie的请求：

• 允许Next.js应用的域名作为Origin
• 设置Access-Control-Allow-Credentials: true
• 若使用SameSite=None的Cookie，需确保Cookie已开启Secure属性

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