Angular POST请求无法读取响应Header的问题排查

核心原因 #

浏览器的CORS机制默认仅允许前端访问简单响应头（如Content-Type、Cache-Control等），自定义头（如你代码中的Authorization、USER_ID）属于非简单头，必须由后端明确配置暴露给前端，否则即使Chrome网络面板能看到这些头，Angular代码也无法读取。同时，Angular请求需要配置为获取完整响应对象才能访问Headers。

1. Angular端请求调整 #

要获取响应Header，必须将请求的observe参数设置为'response'，这样才能拿到包含Headers的完整HttpResponse对象，而不是仅拿到响应体。

修正POST认证请求 #

authenticate(authRequest: AuthRequest) {
  return this.http.post(this.baseUrl + "/users/login", authRequest, {
    responseType: 'text',
    observe: 'response' // 关键配置：获取完整响应对象
  }).subscribe({
    next: (res: HttpResponse<string>) => {
      console.log('响应体:', res.body);
      console.log('Authorization Header:', res.headers.get('Authorization'));
      console.log('USER_ID Header:', res.headers.get('USER_ID'));
    },
    error: (err) => console.log(err),
    complete: () => console.log("Done")
  });
}

已配置GET请求的说明 #

你的dummy()方法已经设置了observe: 'response'，调整后端配置后即可正常读取Header。

2. Spring Boot后端CORS配置 #

需要通过CORS配置，明确告知浏览器允许前端访问自定义响应头。

方案一：局部Controller配置 #

在对应接口的Controller方法上添加@CrossOrigin注解，指定要暴露的Header：

@CrossOrigin(exposedHeaders = {SecurityConstants.HEADER_STRING, SecurityConstants.USER_ID})
@PostMapping("/users/login")
public ResponseEntity<?> handleLogin() {
    // 登录逻辑
    return ResponseEntity.ok().build();
}

方案二：全局CORS配置（推荐） #

创建全局配置类，统一处理所有接口的跨域：

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();

        // 允许跨域的前端地址（根据实际环境修改）
        config.setAllowedOrigins(Collections.singletonList("http://localhost:4200"));
        // 允许的请求方法
        config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        // 允许所有请求头
        config.setAllowedHeaders(Collections.singletonList("*"));
        // 暴露给前端的自定义响应头
        config.setExposedHeaders(Arrays.asList(SecurityConstants.HEADER_STRING, SecurityConstants.USER_ID));
        // 允许携带Cookie等凭证（如果需要）
        config.setAllowCredentials(true);

        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

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