Lire les en-têtes de réponse à partir de la réponse API - Angular 5 + TypeScript

Question

Je déclenche un HTTP et j'obtiens une réponse valide de sa part. La réponse contient également un en-tête X-Token que je souhaite lire. J'essaie d'utiliser le code ci-dessous pour lire les en-têtes, mais j'obtiens null comme résultat.

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 réponse de l API lorsqu'il est vérifié dans Chrome inspect, l'en-tête est présent.

Answer 1

Avez-vous exposé le X-Token du côté serveur en utilisant access-control-expose-headers ? parce que tous les en-têtes ne sont pas autorisés à être accessibles du côté client, vous devez les exposer du côté serveur.

De même, dans votre front-end, vous pouvez utiliser la nouvelle fonction HTTP pour obtenir une réponse complète en utilisant {observe: 'response'} comme

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

Answer 2

Dans mon cas, dans le POST réponse que je veux avoir la authorization header parce que j'avais le JWT Token en elle. Donc ce que j'ai lu de ce post est l'en-tête que nous voulons ajouter comme un Expose Header depuis le back-end. Donc ce que j'ai fait, c'est ajouter le Authorization à l'en-tête de mon En-tête exposé comme ceci dans mon 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

Et à mon côté angulaire

Dans le composant.

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 mon service.

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

Answer 3

Vous devez utiliser le nouveau HttpClient . Vous pouvez trouver plus d'informations ici .

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

Answer 4

Comme l'a expliqué Hrishikesh Kale, nous devons passer les Access-Control-Expose-Headers.

Voici comment nous pouvons le faire dans l'environnement 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();
            }
        }

Une autre façon est d'ajouter le code suivant dans le fichier webApiconfig.cs.

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

**Nous pouvons ajouter des en-têtes personnalisés dans le fichier web.config comme ci-dessous. *

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

nous pouvons créer un attribut et décorer la méthode avec l'attribut.

Happy Coding ! !

Answer 5

Vous pouvez obtenir des données à partir d'en-têtes de réponses postales de cette façon (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'));
})