如何在Angular无状态HTTP请求中使用Keycloak访问令牌

看起来你已经走对了方向，但跨域场景下Cookie的传递确实容易踩坑，我来帮你梳理几个关键排查点和解决方案：

1. 检查Keycloak Cookie的核心属性配置 #

浏览器对Cookie的发送有严格的规则，尤其是跨域场景下，你需要确保KEYCLOAK_ADAPTER_STATE的Cookie属性符合要求：

在Spring Boot的application.yml（或application.properties）里补充Cookie的具体配置：

keycloak:
  token-store: cookie
  cookie:
    same-site: None  # 跨域场景下必须设为None，否则浏览器会阻止发送
    secure: true     # 生产环境HTTPS下必须开启，本地HTTP测试可以临时设为false
    domain: "localhost"  # 前后端共用的域名，比如前后端都在localhost下，或者你的生产域名
    path: "/"        # 确保Cookie的路径覆盖所有后端接口

注意：如果same-site设为None，secure必须为true（除了本地HTTP测试），否则浏览器会拒绝存储这个Cookie。

2. 修正Spring Boot的CORS配置 #

当Angular开启withCredentials: true时，后端的CORS配置不能使用通配符*作为允许的Origin，必须指定具体的前端地址，同时明确允许credentials：

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:4200")  // 替换成你的Angular实际地址
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

如果用Spring Security，还要确保CORS配置在Security过滤链之前生效，避免被拦截。

3. 升级Angular的请求写法 #

你用的RequestOptions在新版本Angular里已经被废弃了，建议改用HttpClient的原生配置方式，确保withCredentials正确生效：

// 正确的写法（Angular 4+）
this.http.get('http://your-backend-url/myservice', { 
  withCredentials: true 
}).subscribe(response => {
  // 处理响应
});

旧的RequestOptions可能存在兼容性问题，导致withCredentials没有被正确设置到请求上。

4. 浏览器端验证Cookie状态 #

打开浏览器开发者工具（F12），切换到Application -> Cookies，查看KEYCLOAK_ADAPTER_STATE是否存在：

• 确认Domain和Path是否匹配你的后端地址
• 确认SameSite属性是None（跨域场景）
• 确认Secure属性的状态和你的协议（HTTP/HTTPS）匹配

如果Cookie不存在，说明Keycloak适配器的token-store配置没有生效，或者认证流程没有正确生成Cookie，可以重新检查Keycloak的认证跳转是否完成。

5. 无状态模式的替代方案：Bearer令牌 #

如果Cookie方式的跨域问题实在难以调试，也可以换一种无状态实现方式：

1. 登录成功后，从Keycloak获取access_token，存储到Angular的localStorage或sessionStorage中
2. 每次发起请求时，在请求头里携带Bearer令牌：

const accessToken = localStorage.getItem('keycloak-access-token');
const headers = new HttpHeaders().set('Authorization', `Bearer ${accessToken}`);

this.http.get('http://your-backend-url/myservice', { headers }).subscribe();

Spring Boot的Keycloak适配器默认支持解析Authorization头里的Bearer令牌，不需要额外配置，这种方式在跨域场景下更简单，也避免了Cookie的各种限制。

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