webentwicklung-frage-antwort-db.com.de

Antwortheader aus API-Antwort lesen - Angular 5 + TypeScript

Ich löse eine HTTP-Anfrage aus und erhalte eine gültige Antwort. Die Antwort hat auch einen Header X-Token, den ich lesen möchte. Ich versuche den folgenden Code, um die Kopfzeilen zu lesen, aber als Ergebnis bekomme ich null

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

Die Antwort der Variable API zeigt an, dass der Header vorhanden ist, wenn er in Chrome inspect markiert ist. Ich habe mir einige verwandte Fragen zu StackOverflow angesehen, aber nichts half.

 enter image description here

angularhttptypescriptangular5
16
Sahil Khanna

haben Sie das X-Token vom Server aus zugänglich gemacht? mit "Zugriffskontroll-Expose-Headern". Da nicht auf alle Header von der Clientseite aus zugegriffen werden darf, müssen Sie sie auf der Serverseite verfügbar machen

auch in Ihrem Frontend können Sie das neue Modul HTTP verwenden, um eine vollständige Antwort mit {observe: 'response'} like zu erhalten 

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

Sie sollten die neue HttpClient verwenden. Weitere Informationen finden Sie hier.

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

In meinem Fall in der POST-Antwort möchte ich den authorization header haben, weil ich den JWT Token darin hatte . Also, was ich aus this post gelesen habe, ist der Header, den ich möchte, als Expose Header aus dem back-end . Also habe ich die Authorization-Kopfzeile zu meinem Exposed-Header in meinem filter class hinzugefügt.

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

Und an meiner Winkelseite

In der Komponente.

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

Auf meiner Serviceseite.

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

Wie Hrishikesh Kale erklärt hat, müssen wir die Access-Control-Expose-Header übergeben.

So können wir es in der WebAPI/MVC-Umgebung tun: 

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

Eine andere Möglichkeit ist, dass wir Code wie unten in der Datei webApiconfig.cs hinzufügen können. 

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

Wir können benutzerdefinierte Header in der Datei web.config wie folgt hinzufügen. 

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

wir können ein Attribut erstellen und die Methode mit dem Attribut dekore.

Viel Spaß beim Codieren !!

3
Developer

Sie können auf diese Weise Daten aus Post-Response-Headern erhalten (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'));
})
0
Pritam Parker

Sie können Header mit dem folgenden Code erhalten

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

später können wir den erforderlichen Header vom Json-Objekt erhalten.

header_list['X-Token']
0
Gurudath BN