Spring MVC与Angular跨域场景下浏览器未保存Cookie问题

以下是导致浏览器未保存Cookie的几个关键原因及对应解决方案：

1. 源（Origin）不匹配问题 #

你的后端CORS配置中allowedOrigins设置为http://127.0.0.1:4200，但前端实际运行在http://localhost:4200。在浏览器的同源策略中，localhost和127.0.0.1被视为不同的域名，即使它们指向同一台本地机器。这会导致浏览器认为Cookie的来源与当前页面源不匹配，从而拒绝保存。

解决办法：
将CORS配置中的allowedOrigins修改为前端实际的源：

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry
            .addMapping("/**")
            .allowCredentials(true)
            .allowedOrigins("http://localhost:4200");
}

或者同时允许两个本地源：

.allowedOrigins("http://localhost:4200", "http://127.0.0.1:4200")

2. 前端请求未启用withCredentials #

即使后端配置了allowCredentials(true)，前端发起请求时必须显式设置withCredentials为true，否则浏览器不会处理响应中的Cookie。

Angular中的配置方式：
在HttpClient请求中添加withCredentials选项：

this.http.get('http://localhost:8080/api/xxx', { withCredentials: true })
  .subscribe(response => {
    // 处理响应
  });

如果需要全局启用，可以在HttpClientModule的配置中设置：

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: class implements HttpInterceptor {
        intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
          return next.handle(req.clone({ withCredentials: true }));
        }
      },
      multi: true
    }
  ]
})
export class AppModule { }

3. Cookie的SameSite属性限制 #

你当前设置的Cookie未指定SameSite属性，浏览器默认会使用Lax模式。在跨域请求场景下，Lax模式可能会阻止Cookie的保存。

注意：如果你的前端和后端都是HTTP协议（非HTTPS），不能设置SameSite=None，因为该模式要求Cookie必须带有Secure属性（仅在HTTPS下生效）。本地开发时可以设置SameSite=Lax：

refreshCookie.setSameSite("Lax");

如果是HTTPS环境，可以设置：

refreshCookie.setSameSite("None");
refreshCookie.setSecure(true);

4. 确认Cookie的查看位置 #

HttpOnly Cookie无法通过JavaScript访问，需在浏览器开发者工具的Application标签页中，选择左侧导航栏Cookies下的http://localhost:8080（后端域名）查看，而非前端的http://localhost:4200。

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