Angular 7 HttpClient 发布响应标头为空

Posted 2023-02-27

【中文标题】Angular 7 HttpClient 发布响应标头为空

【英文标题】：Angular 7 HttpClient post response headers are empty

【发布时间】：2019-06-20 09:06:49

【问题描述】：

我正在尝试使用 Spring 安全后端从 Angular 7 执行登录：

login(username: string, password: string) 

    const formData = new FormData();
    formData.append('username', username);
    formData.append('password', password);

    return this.http.post<UserInfo>(`$API_URL/login`, formData, observe: 'response')
      .pipe(map(response => 

        const jwtToken = response.headers.get(AUTHORIZATION).replace('Bearer', '').trim();
        const userInfo = response.body;

        if (jwtToken && userInfo) 
          const user = new User(username, password, jwtToken, userInfo);
          localStorage.setItem(CURRENT_USER, JSON.stringify(user));
          this.currentUserSubject.next(user);
        

        return response;
      ));
  

但是，response.headers 只是空的并且不包含任何标题。 Postman 和 Chrome 开发工具显示了许多标题，甚至是我需要的一个 - 授权。我已经查看了许多 SO 问题和 github 问题，但他们都说了同样的话，这对我不起作用 - 只是在 CORS Access-Control-Expose-Headers 中列出标题，但我已经这样做了，没有任何改变。这是一个相关的 Spring 配置：

@Bean
    public CorsConfigurationSource corsConfigurationSource() 
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedOrigin("http://localhost:4200");
        configuration.addExposedHeader("Authorization");
        configuration.addAllowedMethod("*");
        configuration.addAllowedHeader("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    

此时我被卡住了，不知道如何让 Angular 访问这些标头：

【问题讨论】：

什么是AUTHORIZATION？在response.headers.get(AUTHORIZATION)

它只是一个存储在我保存所有常量和枚举的文件中的常量：export const AUTHORIZATION = 'Authorization';

【参考方案1】：

您需要authorization header，您可以通过response.headers.get("Authorization") 获得。试试：

const jwtToken = response.headers.get("Authorization").replace('Bearer', '').trim();

【讨论】：

由于某种原因，当我用一个实际的内联字符串替换一个常量时，它开始工作了。

【参考方案2】：

在服务器端，您需要配置“Access-Control-Allow-Headers”。参考这篇文章：Angular 6 Get response headers with httpclient issue。

对我来说，这个配置成功了：

@Bean
CorsConfigurationSource corsConfigurationSource() 
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addExposedHeader(
            "Authorization, x-xsrf-token, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, "
                    + "Content-Type, Access-Control-Request-Method, Custom-Filter-Header");
    config.addAllowedHeader("*");
    config.addAllowedMethod("OPTIONS");
    config.addAllowedMethod("GET");
    config.addAllowedMethod("POST");
    config.addAllowedMethod("PUT");
    config.addAllowedMethod("DELETE");
    source.registerCorsConfiguration("/**", config);
    return source;

【讨论】：

我已经这样做了，我在最初的问题中提到了它。它不起作用。

这是我配置的：

我已经在上面添加了我的配置。 addExposedHeader 包含“Access-Control-Allow-Headers”。