Angular/NestJS应用浏览器无法保存Set-Cookie中JWT令牌问题

你遇到的浏览器不保存Cookie的问题，核心原因是SameSite=None与Secure属性的搭配不符合浏览器安全规范，同时还有几个需要确认的细节：

1. 修复SameSite与Secure的配置冲突 #

浏览器安全规则明确要求：当Cookie的SameSite属性设为None时，必须同时设置Secure: true，否则会直接拒绝存储该Cookie——哪怕是localhost的HTTP环境，Chrome和Firefox现在都严格执行这个规则。

修改你的NestJS后端Cookie配置：

// NestJS Controller
@Post('login')
async signIn(@Body() signInDto: SignInDto, @Res() response: Response) {
  const { access_token } = await this.authService.signIn(signInDto.username, signInDto.password);
  response.cookie('access_token', access_token, {
    maxAge: 1000 * 60 * 60 * 24 * 7,
    sameSite: 'none',
    secure: true, // 改为true
    httpOnly: true,
    path: '/',
  });
  return response.sendStatus(200);
}

注：Chrome 81+之后，localhost的HTTP被视为安全上下文，所以Secure: true的Cookie可以正常存储和使用。

2. 确认Axios的withCredentials全局生效 #

虽然你提到privateRequest配置了withCredentials，但要确保所有请求（包括登录请求）都正确启用了该选项。可以检查Axios的全局配置是否设置：

// 在HTTP工具文件中添加全局配置
import axios from 'axios';
axios.defaults.withCredentials = true;

或者在privateRequest函数的请求配置中明确指定：

async privateRequest(method, url, data) {
  return axios({
    method,
    url,
    data,
    withCredentials: true, // 确保每个请求都带这个配置
  });
}

3. 验证CORS配置的精确性 #

确认ALLOWED_ORIGINS的取值与前端地址完全一致（比如http://localhost:4200，不能省略http://，也不能带结尾斜杠）。你已经打印确认过，这一步可以快速排查是否有配置遗漏。

4. 检查浏览器第三方Cookie设置 #

跨域场景下（前后端不同端口），该Cookie属于第三方Cookie。确保浏览器未禁用第三方Cookie：

• Chrome：设置 → 隐私和安全 → Cookie和其他网站数据 → 确保"允许所有Cookie"或"阻止第三方Cookie"未开启
• Firefox：设置 → 隐私和安全 → Cookie和网站数据 → 确保"接受来自网站的Cookie和网站数据"

按以上步骤调整后，浏览器应该能正常保存Cookie，后续请求也会自动携带access_token。

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