代码之家 › 专栏 › 技术社区 › Jozef Morvay

Angular 7 HttpClient post响应标头为空

angular-httpclient angular7 spring-security angular

Jozef Morvay · 技术社区 · 6 年前

我正在尝试使用Spring security后端从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开发工具显示了许多标题,甚至是我需要的标题——授权。我已经回顾了很多这样的问题和github问题,但它们都说了同样的话,这对我来说并不适用——在CORS Access Control Expose Headers中简单地列出header,但我已经做了,没有做任何更改。下面是一个相关的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;
    }

在这一点上,我被卡住了,不知道如何从角度访问这些标题:

2 回复 | 直到 6 年前

Vadi 6 年前

authorization header ,你可以过得去 response.headers.get("Authorization") . 尝试:

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

D. Winz 6 年前

在服务器端,您需要配置“访问控制允许标头”。请参阅本帖: 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;
}