Заголовки ответа HttpClient в Angular 7 пусты - PullRequest
Новая
       51

Заголовки ответа HttpClient в Angular 7 пусты

0 голосов
/ 27 января 2019

Я пытаюсь выполнить вход из Angular 7 с бэкэндом безопасности Spring: 

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 dev показывают много заголовков и даже тот, который мне нужен - Авторизация.Я рассмотрел много вопросов 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 доступ к этим заголовкам:

enter image description here

Ответы [ 2 ]

0 голосов
/ 28 января 2019

На стороне сервера вам необходимо настроить «Access-Control-Allow-Headers». См. Этот пост: Angular 6 Получить заголовки ответа с вопросом httpclient .

Для меня эта конфигурация сделала свое дело: 

@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;
}
0 голосов
/ 27 января 2019

Вам нужно authorization header, которое вы можете получить response.headers.get("Authorization").Попробуйте: 

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