跨端口部署时Angular UI如何获取并携带后端设置的Cookie

后端（Java）配置 #

1. 正确配置CORS规则 #

跨域请求携带Cookie时，CORS必须满足两个核心要求：

• Access-Control-Allow-Origin必须设置为前端的具体地址（如http://localhost:4200），不能使用通配符*
• 开启Access-Control-Allow-Credentials为true

以Spring Boot为例，全局CORS配置代码：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:4200")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

2. 设置Cookie的关键属性 #

登录接口响应中设置Cookie时，必须配置以下属性确保跨域场景下浏览器能正确存储并携带：

• SameSite=None：跨域场景下强制要求，否则浏览器会拦截Cookie
• HttpOnly：推荐开启，防止XSS攻击窃取Cookie
• Secure：HTTPS环境下必须设为true，本地HTTP开发可暂时设为false
• Path=/：确保Cookie对后端所有接口路径生效
• Domain=localhost：指定Cookie的作用域，本地开发设为localhost即可

Java代码示例：

@PostMapping("/api/login")
public ResponseEntity<?> login(@RequestBody LoginRequest request, HttpServletResponse response) {
    // 验证登录逻辑，生成token
    String authToken = generateAuthToken(request);
    
    Cookie authCookie = new Cookie("auth_token", authToken);
    authCookie.setHttpOnly(true);
    authCookie.setSecure(false); // 本地HTTP环境用false，生产HTTPS改为true
    authCookie.setSameSite("None");
    authCookie.setPath("/");
    authCookie.setDomain("localhost");
    authCookie.setMaxAge(86400); // 设置Cookie有效期，单位秒
    
    response.addCookie(authCookie);
    return ResponseEntity.ok("登录成功");
}

前端（Angular）配置 #

1. 发起请求时携带凭证 #

使用Angular的HttpClient发起请求时，必须开启withCredentials为true，否则浏览器不会自动携带Cookie。

单个请求配置

import { HttpClient } from '@angular/common/http';

// 登录请求示例
this.http.post('http://localhost:8080/api/login', { username: 'xxx', password: 'xxx' }, { withCredentials: true })
  .subscribe(res => {
    // 处理登录成功逻辑
  });

全局拦截器配置（推荐）

为避免每个请求都手动设置，可创建HTTP拦截器统一开启withCredentials：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class CredentialInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 克隆请求并开启凭证携带
    const modifiedRequest = req.clone({ withCredentials: true });
    return next.handle(modifiedRequest);
  }
}

然后在AppModule中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CredentialInterceptor } from './credential.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CredentialInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

注意事项 #

• 若使用Chrome浏览器本地开发仍遇到问题，可临时添加启动参数--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure绕过浏览器的SameSite严格检查，但生产环境必须依赖正确的Cookie属性配置
• 确保前后端的端口、协议（HTTP/HTTPS）一致，否则Cookie的Secure属性会影响存储

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