Come ottenere il valore nell'intestazione della risposta Angular2

Question

Voglio ottenere il token di sessione nell'intestazione della risposta (Set-Cookie). Come posso accedere ai valori nell'intestazione della risposta?

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

       }); 

questo è il mio header di risposta

Answer 1

Il problema è che si mappa la vostra risposta al suo contenuto JSON. Le intestazioni possono essere raggiunte dalla risposta stessa. Quindi è necessario rimuovere la map dell'operatore:

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

stare attenti con CORS con l'accesso alle intestazioni di risposta. Vedere questa domanda:

• angular2/http get location header of 201 response

Answer 2

Bisogna esporre le intestazioni sul lato server. Alcune intestazioni possono accedere dal client, come il tipo di contenuto, ma non tutto. Per maggiori dettagli date un'occhiata al paragrafo: 'Access-Control-Expose-intestazioni (opzionale)' 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() })

o si può prendere di riferimento da https://angular.io/docs/ts/latest/api/http/index/Headers-class.html

Answer 4

La risposta è semplice, basta usare la funzione Località da url all'interno mappa

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

Answer 5

Un modo per risolvere questo problema è specificare dal proprio back-end quale delle coppie {chiave: valore} delle intestazioni che si desidera esporre.

Utilizzando un backend Java, è possibile aggiungere le seguenti righe:

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

E ora è possibile accedere a questo elemento di cookie con il tuo angolare in questo modo

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

Più spiegazione here

Answer 6

Questo mi ha bloccato per un'ora. Sebbene il debugger di Chrome mostri l'intestazione "Location" non sono stato in grado di leggerlo in angular@4.3.3 utilizzando Microsoft.AspNetCore.Mvc 2.0.0

Si è scoperto che si trattava di un problema CORS. La correzione è stato un uno di linea in Startup.cs:

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

e ora posso leggere l'intestazione in angolare:

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

io non sono sicuro di come Chrome può vedere, ma non ci riuscì angolare - Ovviamente fa ancora parte della risposta effettiva all'API web.