Angular 6 Obtenga encabezados de respuesta con el problema de httpclient

Question

Estoy usando el siguiente código para intentar extraer un valor (ReturnStatus) de los encabezados de respuesta;

Keep-Alive: timeout=5, max=100
ReturnStatus: OK,SO304545
Server: Apache/2.4.29 (Win32) OpenSSL/1.0.2m

El código;

import { Injectable } from ''@angular/core'';

import { Account } from ''./model/account'';
import { HttpClient } from ''@angular/common/http'';
import { Observable, throwError } from "rxjs";
import { map, filter, catchError, mergeMap } from ''rxjs/operators'';

 createOrder(url) : Observable<any> {

  return this._http.get(url, {withCredentials: true, observe: ''response''})
  .pipe(
    map((resp: any) => {
      console.log("response", resp);
      return resp;

    }), catchError( error => {
      console.log("createOrder error",error );
      alert("Create Order Service returned an error. See server log for mote details");
    return throwError("createOrder: " + error)

    })
  );
}

Sin embargo, mi console.log acaba de dar;

HttpResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: 
"http://localhost/cgi-bin/dug.cgi/wh?Page… 
plateLocation=C:%5Ctemp%5Corderimporttemplate.txt", ok: true, …}

He buscado en este sitio y en otros la forma correcta de hacerlo en Angular, pero no he tenido éxito. ¿Podría alguien apuntarme en la dirección correcta por favor?

Muchas gracias,

Marca.

Answer 1

Debe observar la respuesta completa como se describe a continuación:

 createOrder(url) : Observable<HttpResponse<Object>>{

    return this.http.get<HttpResponse<Object>>(this.url, {observe: ''response''}).pipe(
         tap(resp => console.log(''response'', resp))
    );
}

Ahora dentro de resp puedes acceder a encabezados Un ejemplo

 createOrder(url) : Observable<HttpResponse<Object>>{

    return this.http.get<HttpResponse<Object>>(this.url, {observe: ''response''}).pipe(
         tap(resp => console.log(''heaeder'', resp.headers.get(''ReturnStatus'')))
    );
}

Si no puede acceder a su encabezado personalizado como se explicó anteriormente, se debe a que un pequeño conjunto de encabezados están expuestos a JavaScript por defecto por razones de seguridad. Probablemente, si abre las herramientas de desarrollador e inspecciona los encabezados de respuesta, debería ver el deseado.

¿Quién puede elegir qué encabezados están expuestos a javascript?

Los encabezados expuestos son elegidos por la aplicación web (por lo tanto, sus servicios web o su backend. Obviamente, su aplicación web puede escribirse en muchos idiomas y / o en muchos marcos).

Dependiendo de lo que estés usando, puedes lograr este objetivo de diferentes maneras.

Para darle una idea de lo que debe hacer, puedo publicar mi solución Spring. En la clase que extiende WebSecurityConfigurerAdapter , debe agregar estos dos métodos:

@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity
            // we don''t need CSRF because our token is invulnerable
            .csrf().disable()
            .cors()
} 


@Bean
public CorsFilter corsFilter() {
    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 new CorsFilter(source);
}

Tenga en cuenta que he deshabilitado csrf porque estoy usando JWT. Tenga en cuenta que debe refinar las reglas de CorsFilter.

Como puede ver, he agregado Custom-Filter-Header en esta línea

config.addExposedHeader("Authorization, x-xsrf-token, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, " +
                "Content-Type, Access-Control-Request-Method, Custom-Filter-Header");

Puede reemplazar este Custom-Filter-Header con su ReturnStatus