Leer encabezados de respuesta de la respuesta API-Angular 5+TypeScript

http angular5

Question

Estoy activando una solicitud HTTP y obtengo una respuesta válida de ella. La respuesta también tiene un encabezado X-Token que deseo leer. Estoy intentando el siguiente código para leer los encabezados, sin embargo, obtengo un valor nulo como resultado

this.currentlyExecuting.request = this.http.request(reqParams.type, reqParams.url, {
    body: reqParams.body,
    responseType: ''json'',
    observe: ''response''
}).subscribe(
    (_response: any) => {
        // Also tried _response.headers.init();
        const header = _response.headers.get(''X-Token'');
        console.log(header);
        onComplete(_response.body);
     },
    _error => {
        onComplete({
            code: -1,
            message: Constants.WEBSERVICE_INTERNET_NOT_CONNNECTED
        });
    }
);

La respuesta de la API , cuando se verifica en Chrome Inspect, muestra que el encabezado está presente. Intenté mirar varias preguntas relacionadas en StackOverflow pero nada ayudó.

Answer 1

¿has expuesto el token x desde el lado del servidor? utilizando "access-control-expose-headers". Debido a que no se puede acceder a todos los encabezados desde el lado del cliente, debe exponerlos desde el lado del servidor

también en su interfaz, puede usar el nuevo módulo HTTP para obtener una respuesta completa usando { observe: ''response''} como

http
  .get<any>(''url'', {observe: ''response''})
  .subscribe(resp => {
    console.log(resp.headers.get(''X-Token''));
  });

Answer 2

Como ha explicado Hrishikesh Kale, necesitamos pasar los encabezados de control de acceso-exposición.

Aquí le mostramos cómo podemos hacerlo en el entorno WebAPI / MVC:

protected void Application_BeginRequest()
        {
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                //These headers are handling the "pre-flight" OPTIONS call sent by the browser
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "*");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200");
                HttpContext.Current.Response.AddHeader("Access-Control-Expose-Headers", "TestHeaderToExpose");
                HttpContext.Current.Response.End();
            }
        }

Otra forma es agregar código como se muestra a continuación en el archivo webApiconfig.cs.

config.EnableCors(new EnableCorsAttribute("", headers: "", methods: "*",exposedHeaders: "TestHeaderToExpose") { SupportsCredentials = true });

** Podemos agregar encabezados personalizados en el archivo web.config como se muestra a continuación. * *

<httpProtocol>
   <customHeaders>
      <add name="Access-Control-Expose-Headers" value="TestHeaderToExpose" />
   </customHeaders>
</httpProtocol>

Podemos crear un atributo y decorar el método con el atributo.

Feliz codificación !!

Answer 3

Debería usar el nuevo HttpClient . HTTP .

http
  .get<any>(''url'', {observe: ''response''})
  .subscribe(resp => {
    console.log(resp.headers.get(''X-Token''));
  });

Answer 4

En mi caso en la respuesta POST , quiero tener el authorization header porque tenía el JWT Token en él. Entonces, lo que leí de this publicación es el encabezado que queremos que se agregue como un Expose Header desde el back-end. Entonces, lo que hice fue agregar el encabezado de Authorization a mi encabezado expuesto de esta manera en mi filter class .

response.addHeader("Access-Control-Expose-Headers", "Authorization");
response.addHeader("Access-Control-Allow-Headers", "Authorization, X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept, X-Custom-header");
response.addHeader(HEADER_STRING, TOKEN_PREFIX + token); // HEADER_STRING == Authorization

Y a mi lado angular

En el componente.

this.authenticationService.login(this.f.email.value, this.f.password.value)
  .pipe(first())
  .subscribe(
    (data: HttpResponse<any>) => {
      console.log(data.headers.get(''authorization''));
    },
    error => {
      this.loading = false;
    });

A mi lado del servicio.

return this.http.post<any>(Constants.BASE_URL + ''login'', {username: username, password: password},
  {observe: ''response'' as ''body''})
  .pipe(map(user => {
       return user;
  }));

Answer 5

Puede obtener datos de encabezados posteriores a la respuesta de esta manera (Angular 6):

import { HttpClient, HttpHeaders, HttpResponse } from ''@angular/common/http'';

const httpOptions = {
  headers: new HttpHeaders({ ''Content-Type'': ''application/json'' }),
  observe: ''response'' as ''response''
};

this.http.post(link,body,httpOptions).subscribe((res: HttpResponse<any>) => {
  console.log(res.headers.get(''token-key-name''));
})

Answer 6

Puedes obtener encabezados usando el siguiente código

let main_headers = {}
this.http.post(url,
  {email: this.username, password: this.password},
  {''headers'' : new HttpHeaders ({''Content-Type'' : ''application/json''}), ''responseType'': ''text'', observe:''response''})
  .subscribe(response => {
    const keys = response.headers.keys();
    let headers = keys.map(key => {
      `${key}: ${response.headers.get(key)}`
        main_headers[key] = response.headers.get(key)
       }
      );
  });

más tarde podemos obtener el encabezado requerido del objeto json.

header_list[''X-Token'']