web-dev-qa-db-fra.com

Lire les réponses de l'API - Angular 5 + TypeScript

Je déclenche une demande HTTP et j'obtiens une réponse valide. La réponse contient également un en-tête X-Token que je souhaite lire. J'essaie le code ci-dessous pour lire les en-têtes, cependant, je suis nul en conséquence

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 API, une fois cochée dans l'inspection Chrome, indique que l'en-tête est présent. J'ai essayé de regarder plusieurs questions connexes sur StackOverflow mais rien n'y fait.

 enter image description here

angularhttptypescriptangular5
16
Sahil Khanna

avez-vous exposer le x-token du côté serveur? using "access-control-expose-headers". étant donné que tous les en-têtes ne sont pas autorisés à accéder du côté client, vous devez les exposer du côté serveur

également dans votre interface, vous pouvez utiliser le nouveau HTTP module 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'));
  });
34
Hrishikesh Kale

Vous devriez utiliser la nouvelle HttpClient. Vous pouvez trouver plus d'informations ici.

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

Dans mon cas, dans la réponse POST, je veux avoir le authorization header parce que j'avais le JWT Token dedans . Donc ce que je lis de this post est l’en-tête que nous voulons être ajouté comme un Expose Header à partir de back-end . Donc, ce que j'ai fait a été ajouté l'en-tête Authorization à mon en-tête Exposed 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;
    });

À mon côté de service.

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

Comme Hrishikesh Kale l'a expliqué, nous devons passer les en-têtes de contrôle d'accès.

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();
            }
        }

Vous pouvez également ajouter du code comme indiqué ci-dessous 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-Exposed-Headers" value="TestHeaderToExpose" />
   </customHeaders>
</httpProtocol>

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

Bonne codage !!

3
Developer

Vous pouvez obtenir des données à partir des en-têtes post-réponse de cette manière (angulaire 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'));
})
0
Pritam Parker

Vous pouvez obtenir des en-têtes en utilisant le code ci-dessous

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)
       }
      );
  });

plus tard, nous pouvons obtenir l'en-tête requis sous forme de l'objet json.

header_list['X-Token']
0
Gurudath BN