跨域设置Cookie问题：NextJS与NestJS会话认证故障排查

问题背景 #

我有两个应用：

• NextJS客户端运行在https://localhost
• NestJS后端部署在islamabdelhakiim.xyz，后端实现了/login接口用于创建会话、处理登录，核心代码如下：

public async login(emp: CreateAuthDto, res?: Response, req?: Request): Promise<Employee> {
    const { email, password, rememberMe } = emp;
    const hashedPassword = EmployeesService.hash(password);

    const user = await this.employeesModel.findOne({ email, password: hashedPassword });
    if (!user) throw new NotFoundException("user not exists!");

    const userId = user._id;

    // 设置过期时间
    let expiry: Date = rememberMe 
        ? new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 30) 
        : new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 7);

    // 创建会话
    const session = new this.sessionModel<Session>({ expiry, userId });
    const saved = await session.save()
    const sessionId = saved._id.toString();
    
    // 设置Cookie（最初版本）
    res.cookie('session', sessionId, {
        expires: expiry,
        sameSite: "none",
        secure: true,
    });
    res.cookie('user', userId.toString(), {
        sameSite: "none",
        secure: true,
    });
    res.status(200);
    return user;
} 

遇到的问题 #

• 最初用http://localhost客户端，Cookie的secure设为false，浏览器因同源策略拒绝创建Cookie
• 切换客户端到https://localhost，secure设为true后，服务器生成的Cookie域是islamabdelhakiim.xyz，客户端无法读取；手动修改Cookie域为localhost后可正常读取
• 在后端设置Cookie时添加domain: "localhost"属性，浏览器仍拒绝设置Cookie，响应头的Cookie旁报错

解决步骤 #

1. 明确跨域Cookie的核心限制 #

浏览器不允许跨域服务器直接把Cookie设置到localhost域——后端域名是islamabdelhakiim.xyz，和localhost属于完全不同的源，直接指定domain: localhost违反浏览器的Cookie安全策略，所以会被拦截。

2. 调整后端CORS与Cookie配置 #

后端NestJS修改：

• 移除Cookie配置中的domain: "localhost"，让Cookie默认绑定到后端域名islamabdelhakiim.xyz
• 确保后端开启CORS并允许携带凭证，在main.ts中配置：

  app.enableCors({
    origin: 'https://localhost', // 允许的客户端域名
    credentials: true, // 允许请求携带Cookie
    allowedHeaders: ['Content-Type'],
    methods: ['GET', 'POST', 'PUT', 'DELETE']
  });
  

• 保留Cookie的sameSite: "none"和secure: true配置——这是跨域场景下Cookie生效的必要条件

3. 前端请求配置调整 #

前端发起请求时，必须明确设置携带凭证，以fetch为例：

fetch('https://islamabdelhakiim.xyz/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  credentials: 'include', // 关键：携带Cookie
  body: JSON.stringify({ email: 'your-email', password: 'your-password', rememberMe: true })
});

4. 认证流程验证 #

登录成功后，Cookie会被浏览器存储在islamabdelhakiim.xyz域下。后续前端请求后端任何接口时，浏览器会自动携带这些Cookie，后端可以通过req.cookies.session和req.cookies.user获取会话ID与用户ID，完成身份认证。

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