Angular客户端未自动携带JSessionID Cookie致401授权失败

问题现象 #

Angular前端搭配Spring Security后端，已通过代码配置API安全策略：

• 无权限限制（permitAll）的API可正常访问
• 需USER角色的API（如/advanced_search、/creation等）始终返回401未授权状态

排查过程 #

1. 初步怀疑客户端未在初始认证请求后自动携带JSessionID Cookie
2. 检查初始认证请求：已将withCredentials放在请求头中，后端响应确实返回了JSessionID Cookie，但后续请求未携带该Cookie，客户端存储中也无对应Cookie
3. 测试场景：多浏览器测试、直接访问API均无效；仅Postman可正常交互；通过拦截器手动添加授权头可正常访问API

根因定位 #

withCredentials配置位置错误：无需在初始认证请求的请求头中设置，需在所有后续请求的请求配置中全局开启。

代码对比与修复 #

后端Spring Security配置（正常） #

http
    .cors().and()
    // .csrf().disable()
    .csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()).and()
    .authorizeRequests()
        // .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
        .antMatchers("/xrtool/*").permitAll()
        .antMatchers("/advanced_search").hasRole("USER")
        .antMatchers("/creation").hasRole("USER")
        .antMatchers("/edit").hasRole("USER")
        .antMatchers("/basicAuth").permitAll()
        .antMatchers("/**").permitAll()
    .anyRequest().authenticated().and()
    .httpBasic();

错误的初始认证请求代码 #

authenticate(username : string, password : string){
    let authHeader = new HttpHeaders({
      authorization : 'Basic ' + btoa(username + ':' + password),
      withCredentials: 'true' // 错误位置：放在请求头中无效
    });
    return this.http.get(`${API_URL}/basicAuth`, {headers: authHeader})
}

修复后的Http拦截器代码（全局开启withCredentials） #

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let username = "b"
    let password = "b"
    let basicAuthHeaderString = "Basic " + window.btoa(username + ':' + password)

    request = request.clone({
      setHeaders: {
        // Authorization: basicAuthHeaderString
      },
      withCredentials: true // 正确位置：在请求配置中全局开启
    })

    return next.handle(request);
}

总结 #

Angular中withCredentials是请求配置的属性，而非请求头字段。全局通过Http拦截器为所有请求开启withCredentials: true，才能确保客户端自动携带后端返回的JSessionID Cookie，从而通过Spring Security的会话认证。

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