Next.js 14 App Router中Cookie设置及服务端组件Cookie问题解决

问题本质 #

服务端组件运行在服务器环境，和用户浏览器完全隔离：

• 浏览器中存储的example.com域名Cookie，受同源策略限制，既无法被localhost:3000的页面脚本读取，也不会自动出现在服务器发起的请求中
• 客户端组件能自动携带Cookie，是因为请求由浏览器发起，浏览器会根据Cookie的跨域规则（Domain、SameSite、Secure等）自动附加对应域名的Cookie

可行解决方案 #

1. 迁移请求逻辑到客户端组件 #

如果业务允许，将调用example.com的代码移至客户端组件（添加'use client'指令），并确保请求配置携带凭证：

• 使用fetch时：

'use client';

async function fetchData() {
  const res = await fetch('https://example.com/api/data', {
    credentials: 'include' // 关键：告诉浏览器携带目标域名的Cookie
  });
  const data = await res.json();
  return data;
}

• 使用axios时：

'use client';
import axios from 'axios';

async function fetchData() {
  const res = await axios.get('https://example.com/api/data', {
    withCredentials: true // 关键配置
  });
  return res.data;
}

同时需要确保example.com的Cookie设置了：

• SameSite=None：允许跨域请求携带
• Secure：仅在HTTPS下生效（本地测试如果用HTTP，可临时关闭，但生产环境必须开启）
• Domain=example.com：明确Cookie所属域名

2. 反向代理（适用于你控制example.com服务的场景） #

如果example.com是你自己的服务，可以在Next.js中配置反向代理，将本地路径代理到目标域名：

1. 在next.config.js中添加代理配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/example/:path*',
        destination: 'https://example.com/:path*',
      },
    ];
  },
};

module.exports = nextConfig;

2. 服务端组件中请求代理路径：

async function fetchData() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/example/data`, {
    credentials: 'include'
  });
  const data = await res.json();
  return data;
}

这种方式下，请求先到localhost:3000再转发到example.com，浏览器会自动携带符合规则的Cookie。

3. 手动传递令牌（特殊场景适配） #

如果必须在服务端组件发起请求，且example.com支持令牌授权：

1. 在客户端组件中调用example.com的接口获取临时授权令牌（无法直接读取Cookie，但可通过接口返回）
2. 将令牌通过props或React Context传递给服务端组件
3. 服务端组件将令牌放入请求头（如Authorization: Bearer <token>）调用example.com

此方式需目标服务支持令牌机制，且要做好令牌的安全管控。

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