NextAuth.js子域名Cookie问题：Cookie无法在子域名访问

核心问题原因 #

浏览器对localhost域名有特殊处理逻辑，不支持.localhost作为通配符域名来共享Cookie，这是你配置后子域名无法读取Cookie的根本原因。而MissingCSRF错误通常是Cookie配置不统一、跨域验证逻辑不匹配导致的。

分步解决方案 #

1. 改用自定义本地域名替代localhost

通过修改hosts文件创建自定义本地域名，绕过浏览器对localhost的限制：

• 打开本地hosts文件（Windows：C:\Windows\System32\drivers\etc\hosts；macOS/Linux：/etc/hosts），添加以下映射：

  127.0.0.1       app.local
  127.0.0.1       sub.app.local
  

• 更新.env文件中的Cookie域名配置：

  NEXT_PUBLIC_COOKIE_DOMAIN=.app.local
  

• 重启Next.js应用，访问app.local:3000（主域名）和sub.app.local:3000（子域名）进行测试。

2. 统一NextAuth所有Cookie的域名配置

确保NextAuth生成的所有Cookie都使用相同的通配符域名，避免遗漏导致的验证错误：

export const authOptions = {
  // 其他配置...
  trustHost: true, // 关键：允许NextAuth处理不同子域名的Host请求
  cookies: {
    sessionToken: {
      name: "next-auth.session-token",
      options: {
        domain: process.env.NEXT_PUBLIC_COOKIE_DOMAIN || ".alchmy.com",
        httpOnly: true,
        secure: process.env.NODE_ENV === "production",
        sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
        path: "/",
      },
    },
    csrfToken: {
      name: "next-auth.csrf-token",
      options: {
        domain: process.env.NEXT_PUBLIC_COOKIE_DOMAIN || ".alchmy.com",
        httpOnly: false,
        secure: process.env.NODE_ENV === "production",
        sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
        path: "/",
      },
    },
    // 补充其他NextAuth默认Cookie的配置，避免遗漏
    callbackUrl: {
      name: "next-auth.callback-url",
      options: {
        domain: process.env.NEXT_PUBLIC_COOKIE_DOMAIN || ".alchmy.com",
        secure: process.env.NODE_ENV === "production",
        sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
        path: "/",
      },
    },
    pkceCodeVerifier: {
      name: "next-auth.pkce.code_verifier",
      options: {
        domain: process.env.NEXT_PUBLIC_COOKIE_DOMAIN || ".alchmy.com",
        httpOnly: true,
        secure: process.env.NODE_ENV === "production",
        sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
        path: "/",
      },
    },
  },
};

3. 可选：本地开发启用HTTPS（避免secure属性冲突）

如果生产环境使用HTTPS，本地开发建议同步启用HTTPS，确保Cookie的secure属性在本地也能正常生效：

• 安装mkcert工具生成本地可信证书：

  # macOS
  brew install mkcert
  mkcert -install
  # 生成通配符证书
  mkcert app.local "*.app.local"
  

• 修改package.json的启动脚本：

  "scripts": {
    "dev": "next dev --experimental-https --cert ./app.local.pem --key ./app.local-key.pem"
  }
  

• 访问https://app.local:3000和https://sub.app.local:3000进行测试。

4. 排查MissingCSRF错误的关键要点

• 确认登录请求的Origin与Cookie域名匹配，比如从sub.app.local:3000发起的请求，Origin必须是https://sub.app.local:3000
• 确保trustHost: true配置已添加，NextAuth会自动处理子域名的Host头验证
• 检查前端是否正确读取到next-auth.csrf-token Cookie，登录请求中是否携带了正确的CSRF Token

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