Angular 2 http Observable Anfrage nicht zurück Antwort Header

Question

Ich benutze Angular 2.2.3 und HTTP-Anfragen mit Observablen mit Rxjs. Die Kopfzeilen werden in der Chrome-Konsole angezeigt, aber die Kopfzeilenliste des Kopfzeilenobjekts aus der Antwort ist leer. Hier ist der Code:

Anmeldung Funktion

login(body: Object): Observable<Response> { 
    return this.http.post(this.url, body); 
} 

Ruf der Login-Funktion mit Abonnement für den beobachtbaren

this.authService.login(values).subscribe(res => { 
    console.log(res.headers.get("Authorization")) 
    console.log(res) 
}, 
err => { 
    console.log(err); 
}); 

Gibt es etwas, was ich falsch mache oder dass ich sollte anders machen?

Chrome Netzwerk Konsole Response-Header

console.log Ergebnisse

Der null Wert ist res.headers.get("Authorization") Wie Sie sehen können, die Header-Liste leer ist.

Vielen Dank für Ihre Hilfe!

Answer 1

Ich habe die Lösung für mein Problem gefunden. Es stellt sich heraus, dass Angular einen XMLHttpRequest hinter den Kulissen verwendet. Aus diesem Grund müssen die Header, die dem Client "programmgesteuert" (mit Angulars Funktion) angezeigt werden können, in der Liste der Kopfzeile Access-Control-Expose-Headers stehen. Diese Liste muss im Backend erstellt werden, wenn wir die Anfrage zurück an den Client senden. Hier ist, was ich mit Express.js tat den Authorization-Header zu aktivieren:

app.use((req, res, next) => { 
    // List of headers that are to be exposed to the XHR front-end object 
    res.header('Access-Control-Expose-Headers', 'Authorization'); 
    next(); 
}); 

Mein erster Code in dem Front-End gleich geblieben und die console.log des Authorization Header jetzt erscheint.

Documentation explaining why we need this header

Diese ganze Dokumentation ist sehr interessant, ich dachte, dass ich in APIs war ziemlich gut, aber ich habe viel gelernt während dieses :-) Lesen