Lesen Sie die Antwortheader aus der API-Antwort - Angular 5 + TypeScript

Ich löse eine HTTPAnfrage 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 Header zu lesen, erhalte jedoch als Ergebnis 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 von zeigt API, wenn sie in Chrome inspect aktiviert ist, dass der Header vorhanden ist.

Haben Sie die X-Tokenvon der Serverseite mit belichtet access-control-expose-headers? Da nicht auf alle Header von der Clientseite aus zugegriffen werden darf, müssen Sie sie von der Serverseite aus verfügbar machen

Auch in Ihrem Frontend können Sie ein neues HTTP- Modul verwenden, um mit {observe: 'response'}like eine vollständige Antwort zu erhalten

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

In meinem Fall in der POSTAntwort möchte ich das haben, authorization headerweil ich das JWT Tokendrin hatte. Was ich aus diesem Beitrag lese, ist der Header, den wir als Expose HeaderBack-End hinzufügen möchten . Also habe ich den Header wie Authorizationfolgt in meinem Exposed Header hinzugefügt 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

Und an meiner eckigen Seite

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

An meiner Service-Seite.

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

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

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

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

Hier erfahren Sie, wie wir dies in der WebAPI / MVC-Umgebung tun können:

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 besteht darin, Code wie folgt in die Datei webApiconfig.cs einzufügen.

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

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

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

Wir können ein Attribut erstellen und die Methode mit dem Attribut dekodieren.

Viel Spaß beim Codieren !!

Auf diese Weise können Sie Daten aus Post-Response-Headern abrufen (Winkel 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'));
})

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']

Angular 7 Service:

    this.http.post (environment.urlRest + '/ my-operation', body, {Header: Header, beobachten: 'Antwort'});
    

    this.myService.myfunction (). subscribe (
          (res: HttpResponse) => {
              console.log (res.headers.get ('x-token'));
                },
        Fehler => {
        }) 
    

Versuchen Sie diesen einfachen Code.

1. Komponentenseitencode: Zum Abrufen der Body- und Header-Eigenschaft. Hier gibt es ein Token im Body und Authorizationim Header.

loginUser() {
    this.userService.loginTest(this.loginCred).
    subscribe(res => {
        let output1 = res;
        console.log(output1.body.token);
        console.log(output1.headers.get('Authorization'));
    })
}

2. Service-seitiger Code: Senden von Anmeldedaten im Body und Beobachten der Antwort in Observableallen, die auf der Komponentenseite abonniert werden.

loginTest(loginCred: LoginParams): Observable<any> {
    const header1= {'Content-Type':'application/json',};
    const body =  JSON.stringify(loginCred);
    return this.http.post<any>(this.baseURL+'signin',body,{
        headers: header1,
        observe: 'response',
        responseType: 'json'
    });
}