NextJS跨子域Cookie设置问题：从子域设置Cookie至所有子域

开发者阿泽

2026-6-25

解决NextJS子域间Cookie共享（单点登录）问题

核心原因：浏览器的Cookie安全限制

你遇到的问题本质是浏览器的同源策略限制：子域的前端页面无法直接设置主域的Cookie。不管你用nookies还是原生document.cookie，只要代码是在app.example.com这类子域页面里执行，浏览器会自动忽略你设置的domain: "example.com"或.example.com，强制把Cookie绑定到当前子域。

而你提到的追踪工具能设置.example.com的Cookie，是因为它们的脚本是从主域加载的（比如<script src="https://example.com/track.js"></script>），脚本的源是主域，所以浏览器允许它设置主域的Cookie。

无需迁移登录页的解决方案

1. 让主域API服务端设置Cookie

这是最标准的方案：

把登录请求发送到主域的API（比如https://api.example.com/login），而非子域API。
在API的响应头里设置Set-Cookie，指定Domain=.example.com、Path=/、HttpOnly（无需前端读取时建议开启）、Secure（HTTPS环境必填）等属性。
所有子域应用会自动接收这个Cookie，实现单点登录。

NextJS主域API路由示例：

// pages/api/login.js（部署在主域）
export default function handler(req, res) {
  const token = req.body.token;
  res.setHeader('Set-Cookie', [
    `token=JWT ${token}; Max-Age=${29*24*60*60}; Path=/; Domain=.example.com; HttpOnly; Secure; SameSite=Lax`
  ]);
  res.status(200).json({ success: true });
}

2. 主域中转页面设置Cookie

如果不想改动API部署，可以在子域登录成功后，跳转到主域的空白页面完成Cookie设置，再跳转回子域：

子域登录成功后，携带token和跳转目标，跳转到https://example.com/set-cookie?token=xxx&redirect=app.example.com/dashboard
主域页面（静态页或API路由）拿到token后设置主域Cookie，再重定向回子域目标页面。

主域pages/set-cookie.js示例：

import { useRouter } from 'next/router';
import { setCookie } from 'nookies';

export default function SetCookiePage() {
  const router = useRouter();
  const { token, redirect } = router.query;

  // 主域页面执行，浏览器允许设置主域Cookie
  setCookie(null, 'token', `JWT ${token}`, {
    maxAge: 29 * 24 * 60 * 60,
    path: '/',
    domain: '.example.com',
    secure: true,
    sameSite: 'lax'
  });

  // 跳回原应用
  router.push(decodeURIComponent(redirect));

  return <div>正在登录...</div>;
}

3. 验证nookies的执行环境

如果之前的setCookie是在客户端（比如React组件的useEffect）执行，必然无效；如果是在服务端（比如getServerSideProps或API路由）执行，要确保服务端请求的域名是主域，且响应的Set-Cookie头正确配置了Domain。

关键注意事项

必须在HTTPS环境测试：现代浏览器对Secure属性要求严格，非HTTPS环境会拒绝跨子域Cookie。
SameSite属性：建议设为Lax或Strict，兼顾安全与跨子域跳转需求。
不要尝试客户端绕过限制：这是浏览器的安全规则，没有可行的绕过方法，只能通过服务端或主域页面设置。

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