Wie bekomme ich Wert in Response-Header Angular2

Question

Ich möchte Sitzungstoken in Antwort-Header (Set-Cookie) abrufen. Wie kann ich auf Werte in Response-Header zugreifen?

var headers = new Headers(); 
      headers.append('Content-Type', 'application/json'); 
      console.log('url',this.loginUrl) 
      this.http.post(this.loginUrl, 
       JSON.stringify({ "username": value.username, "password": value.password }), 
       { headers: headers }) 
       .map((res: Response) => 
        res.json()) 
       .subscribe((res) => { 
        console.log("res", res); 
        this.loading.hide(); 
        if (res.message_code == "SUCCESS") { 
         this.nav.setRoot(HomePage, { 
          username: value.username, 
         }); 
        } else { 
         let alert = Alert.create({ 
          title: "Sign In Error !", 
          subTitle: 'Please Check Username or Password.', 
          buttons: ['Ok'] 
         }); 
         this.nav.present(alert); 
        } 
       }, err => { 
        this.loading.hide(); 
        console.log('error', err); 

       }); 

das ist mein Kopf Antwort

Answer 1

Das Problem ist, dass Sie Ihre Antwort auf seine json Inhalt abzubilden. Header können über die Antwort selbst erreicht werden. So müssen Sie den map Operator entfernen:

this.http.post(this.loginUrl, 
     JSON.stringify({ "username": value.username, "password": value.password }), 
     { headers: headers }) 
     /*.map((res: Response) => // <-------------- 
       res.json())*/ 
     .subscribe((res) => { 
     var payload = res.json(); 
     var headers = res.headers; 

     var setCookieHeader = headers.get('Set-Cookie') 
     (...) 
     }); 

Seien Sie vorsichtig mit CORS mit Zugriff auf die Response-Header. Sehen Sie diese Frage:

• angular2/http get location header of 201 response

Answer 2

Sie müssen die Header auf der Server-Seite aus. Auf einige Header kann vom Client aus zugegriffen werden, wie der Inhaltstyp, aber nicht alle. Weitere Einzelheiten finden Sie in Abschnitt: 'Access-Control-Expose-Header (optional)' in http://www.html5rocks.com/en/tutorials/cors/

Answer 3

.map((res: Response) => { localStorage.setItem('setCookie', res.headers._headers.get("Set-Cookie")[0]); res.json() })

oder Sie können von https://angular.io/docs/ts/latest/api/http/index/Headers-class.html

Answer 4

Bezug nehmen Die Antwort ist einfach, benutzen Sie einfach die Lage von url innerhalb Karte Funktion

.map((data: Response) => { response.url }) 

Answer 5

Eine Möglichkeit, dieses Problem zu lösen, besteht darin, in Ihrem Backend anzugeben, welches der Paare {key: value} Ihrer Header angezeigt werden soll.

ein Java-Backend verwenden, können Sie die folgenden Zeilen hinzu:

public void methodJava(HttpServletResponse response){ 
... 
response.addHeader("access-control-expose-headers", "Set-Cookie"); 
} 

Und jetzt können Sie dieses Cookie Element mit Winkel Zugriff auf diese Art und Weise

service(){ 
... 
return this.http 
    .get(<your url here for your backend>) 
    .map(res => console.log("cookie: " + res.headers.get("Set-Cookie")) 
} 

Weitere Erklärung here

Answer 6

Das hat mich eine Stunde lang ratlos gemacht. Obwohl der Chrome-Debugger den Header 'Location' anzeigt, konnte ich ihn in equinal@4.3.3 mit Microsoft.AspNetCore.Mvc 2.0.0 nicht lesen.

Es stellt sich heraus, dass es sich um ein CORS-Problem handelte. Das Update war ein Motto in Startup.cs:

app.UseCors(builder => 
    builder.WithOrigins("https://mywebsite") 
     .WithExposedHeaders("Location") // <--------- ADD THIS LINE 
     .AllowAnyHeader() 
     .AllowAnyMethod()); 

Und jetzt kann ich den Header in Winkeln lesen:

this.authHttp.post('https://someapi/something', {name: 'testing'}) 
    .map((response: Response) => { 
     // The following line now works: 
     const url = response.headers.get('Location'); 
    }); 

Ich bin nicht sicher, wie Chrome kann es sehen, aber Winkel konnte nicht - Es ist offensichtlich immer noch Teil der tatsächlichen Web API Antwort.