Angular 5集成Spring Boot时无法读取授权头且遇CORS问题

我之前在做Spring Boot + Angular 5的项目时，刚好碰到过和你一模一样的问题——Postman测后端全正常，一集成前端就CORS报错还拿不到授权头，给你梳理下最有效的解决步骤：

一、先彻底搞定CORS配置（核心） #

Spring Boot里的CORS不能只简单加个@CrossOrigin，尤其是涉及到凭证和自定义响应头的场景，推荐用全局CORS过滤器，覆盖所有接口：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        
        // 替换成你的Angular前端域名，比如http://localhost:4200
        config.addAllowedOrigin("http://localhost:4200");
        // 允许携带凭证（比如Cookie、Authorization头），这个必须开
        config.setAllowCredentials(true);
        // 允许所有请求头，或者指定你需要的（比如Content-Type、Authorization）
        config.addAllowedHeader("*");
        // 允许所有HTTP请求方法
        config.addAllowedMethod("*");
        // 关键！暴露自定义响应头给前端，不然浏览器会屏蔽它
        config.addExposedHeader("Authorization"); // 这里填你后端返回JWT的头名，比如X-Auth-Token
        
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

这里要敲黑板：浏览器有安全限制，默认只允许前端读取标准响应头（比如Content-Type、Cache-Control），像JWT这类自定义授权头必须通过addExposedHeader显式暴露，不然Angular就算拿到响应也读不到这个头。

二、Angular 5端的请求适配 #

前端这边要配合后端配置，确保请求携带凭证并正确读取响应头：

1. 发起请求时配置选项 #

用HttpClient发起请求时，要开启withCredentials，同时设置observe: 'response'来获取完整响应（默认只返回body）：

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

// 示例登录请求
login(username: string, password: string) {
  const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  return this.http.post<any>('/api/auth/login', { username, password }, {
    headers: headers,
    withCredentials: true, // 必须和后端的allowCredentials对应
    observe: 'response' // 获取完整响应对象，包含头信息
  });
}

2. 读取授权头 #

拿到完整响应后，就能直接从headers里取出令牌了：

this.authService.login('your-username', 'your-password').subscribe(
  (response) => {
    // 这里就能拿到后端返回的授权头了
    const token = response.headers.get('Authorization');
    if (token) {
      // 把令牌存到localStorage或者全局服务里
      localStorage.setItem('jwt-token', token);
    }
  },
  (error) => {
    console.error('登录失败', error);
  }
);

三、额外检查点（避坑） #

• 确保Spring Security没有覆盖CORS配置：在你的SecurityConfig里加上http.cors()，让它自动使用我们定义的CorsFilter，示例：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .cors() // 启用CORS，优先用自定义的过滤器
            .and()
            .csrf().disable() // 前后端分离场景通常关闭CSRF
            .authorizeRequests()
            .antMatchers("/api/auth/**").permitAll()
            .anyRequest().authenticated()
            .and()
            // 你的JWT过滤器配置
            .addFilter(new JwtAuthenticationFilter(authenticationManager()))
            .addFilter(new JwtAuthorizationFilter(authenticationManager()))
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }
}

• 用浏览器开发者工具排查：打开Network面板，查看请求的Response Headers里是否有你要的授权头，同时确认Access-Control-Expose-Headers包含这个头，Access-Control-Allow-Origin和你的前端域名匹配。

按照这个流程走，应该能同时解决CORS报错和授权头读取的问题。

内容的提问来源于stack exchange，提问作者svijay.aug12