使用 Angular 读取从 Java Spring Boot 发送的自定义 HTTP 标头，得到 null

Question

我使用 Angular 从 Java Spring Boot 读取 http 标头， 它在邮递员中运行良好。我可以阅读所有标题。 但是当我使用 Angular 时，状态为 200，但标头为 null。 请帮忙。 我哪里做错了？

这是我的java spring api

我的休息API：

    @GetMapping("/welcome")
    public ResponseEntity<String> welcome(){
        HttpHeaders headers = new HttpHeaders();
        headers.add("Authorization","test token");
        return ResponseEntity
                .status(HttpStatus.OK)
                .headers(headers)
                .build();
    }

我的所有标头的 Spring 安全设置：

 @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .cors(cors -> cors.configurationSource(new CorsConfigurationSource() {
                            @Override
                            public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {
                                
                                CorsConfiguration config = new CorsConfiguration();
                                config.setAllowedOrigins(Collections.singletonList("http://localhost:4200"));
                                config.setAllowedMethods(Collections.singletonList("*"));
                                config.setAllowCredentials(true);
                                config.setAllowedHeaders(Collections.singletonList("*"));
                                config.setMaxAge(3600L);
                                return config;
                            }
                        }))
                .csrf(csrf -> csrf.disable())
                .authorizeHttpRequests(auth -> auth
                        .requestMatchers("/welcome","/","/login","/register").permitAll()
//                        .requestMatchers("/products").authenticated()
                        .anyRequest().authenticated()
                )
                .formLogin(formLogin -> formLogin.disable())
                .httpBasic(withDefaults());
        
        return http.build();
    }

这是我的角度http请求

我的http服务设置：

  getWelcome$(): Observable<HttpResponse<any>> {
    return this.httpClient.get<any>(this.url_welcome, {
      observe: 'response',
      withCredentials: true,
    });
  }

我的组件功能：

  onGetWelcome() {
    this.httpService.getWelcome$().subscribe({
      next: (res: HttpResponse<any>) => {
        this.authHeader = res.headers.get('Authorization') as string;
        console.log(res.status);
        console.log(this.authHeader);
      },
      error: (error) => console.log(error),
      complete: () => console.log('completed.'),
    });
  }

我已将 HttpResponse < any > 更改为 HttpReponse < string > ，但不起作用。 当我尝试从其他网站（例如 {JSON} Placeholder）读取标题时， 我的角度可以读取某些标头，例如“Content-Type”。 所以我猜是我的 Java ResponseEntity 出了问题。 我更改了 Java ResponseEntity、headers.set、headers.add，这是我可以从网络获取的不同方法。没有运气。

有什么想法吗？

Answer 1

我找到了解决方案，在这篇post中提到。

在后端，当我添加自定义标头时，我需要再添加一个标头：

headers.add("Access-Control-Expose-Headers","*");

并且 Angular 可以读取所有自定义标头！