Jak uzyskać wartość w nagłówku odpowiedzi Angular2

Question

Chcę uzyskać token sesji w nagłówku odpowiedzi (Set-Cookie). Jak mogę uzyskać dostęp do wartości w nagłówku odpowiedzi?

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

       }); 

to jest moja odpowiedź nagłówek

Answer 1

Problemem jest to, że mapa swoją odpowiedź na jego zawartości JSON. Nagłówki można uzyskać z samej odpowiedzi. Więc trzeba usunąć operatora map:

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

być ostrożnym z CORS z dostępu do nagłówków odpowiedzi. Zobacz na to pytanie:

• angular2/http get location header of 201 response

Answer 2

Trzeba wystawiać nagłówki na stronie serwera. Niektóre nagłówki mają dostęp do klienta, np. Typu zawartości, ale nie wszystkie. Aby uzyskać więcej informacji zajrzyj na ustępu: 'Access-Control-Expose-Nagłówki (opcjonalny)' w http://www.html5rocks.com/en/tutorials/cors/

Answer 3

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

lub można wziąć odwołanie od https://angular.io/docs/ts/latest/api/http/index/Headers-class.html

Answer 4

Odpowiedź jest prosta, wystarczy użyć Lokalizacja z url wewnątrz mapa funkcja

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

Answer 5

Jednym ze sposobów rozwiązania tego problemu jest określenie z twojego zaplecza, którą jedną z par {klucza: wartość} nagłówków chcesz odsłonić.

Korzystanie backend Java, można dodać następujące wiersze:

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

I teraz można uzyskać dostęp do tego elementu ciasteczka ze swoim kątowy tędy

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

więcej wyjaśnień here

Answer 6

To mnie zaskoczyło przez godzinę. Chociaż debugger Chrome pokazuje nagłówek "Lokalizacja", nie mogłem go przeczytać w angular@4.3.3 przy użyciu Microsoft.AspNetCore.Mvc 2.0.0

Okazuje się, że był to problem CORS. Poprawka była jedna wkładka w Startup.cs:

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

A teraz mogę przeczytać nagłówek kątowa:

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

Nie jestem pewien, jak Chrome może go zobaczyć, ale nie mógł kątowa - to oczywiście nadal część rzeczywistej odpowiedzi na interfejs API.