Angular Объект ответа HttpClient не содержит заголовков, которые можно увидеть на вкладке сети браузера, а также когда я использую PostMan

Question

Это метод, выполняющий почтовый вызов на сервер

 submitData(credential){
    credential = JSON.stringify(credential);    
    return this._http.post("http://localhost:8080/login",credential,{observe: 'response'});
  }

Здесь я регистрирую данные в консоли

this.jwtService.submitData(data)
    .subscribe((data)=>{
      console.log(data);

    })

ответ в консоли я получаю

HttpResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8080/login", ok: true, …}
  headers: HttpHeaders
    normalizedNames: Map(0)
      [[Entries]]
        No properties
      size: 0

Это вкладка "Сеть" моих браузеров и Авторизация * Заголовок можно увидеть со значением

Request URL: http://localhost:8080/login
Request Method: POST
Status Code: 200 
Remote Address: [::1]:8080
Referrer Policy: no-referrer-when-downgrade

Response Headers:
Access-Control-Allow-Origin: http://localhost:4200
Access-Control-Expose-Headers: Authorization
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJuYWNodSIsImV4cCI6MTU4NDg2MTYxOH0.Bh46Bv4YWou5kzNp2ib_14Xnu9Ob7G41QqY4_t6UzxdJiq-CHX1yk7BWBmHlOXygMuS7YNVNu0HkhnREoY69iQ
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Length: 0
Date: Sun, 22 Mar 2020 06:20:18 GMT
Expires: 0
Keep-Alive: timeout=60
Pragma: no-cache
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

Даже с приложением почтальона я получаю тот же ответ

Мне нужно обойти эту проблему.

Answer 1

Я нашел ответ на свой вопрос и делюсь им в надежде, что кто-то от этого выиграет.

Я немного изменил свой код,

Сначала нам нужно импортируйте нажмите оператор из 'rxjs / operator' как

import {tap} from 'rxjs/operators'

, затем используйте оператор трубы, как показано ниже, и вы получите свой заголовок.

 submitData(credential){
    credential = JSON.stringify(credential);    
    return this._http.post("http://localhost:8080/login",credential,{observe: 'response'})
    .pipe(tap(res=>{
        console.log('response',res.headers.get('Authorization'));

    }))
  }

Убедитесь, что на вашей стороне сервера есть все условия CORS и , которые предоставляют необходимый вам заголовок . Например, мне нужен заголовок авторизации, поэтому я добавил следующее на своей стороне сервера (я использую spring -boot)

public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .exposedHeaders("Authorization")
                .allowedOrigins("http://localhost:4200");
        WebMvcConfigurer.super.addCorsMappings(registry);
    }

:) Happy Coding