web-dev-qa-db-fra.com

Comment obtenir de la valeur dans l'en-tête de réponse Angular2

je veux obtenir un jeton de session dans l'en-tête de réponse (Set-Cookie)

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

                });

c'est ma réponse en-tête

 enter image description here

httpangular
21
sam

Le problème est que vous associez votre réponse à son contenu json. Les en-têtes peuvent être atteints à partir de la réponse elle-même. Vous devez donc supprimer l'opérateur 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')
         (...)
       });

Soyez prudent avec CORS en accédant aux en-têtes de réponse. Voir cette question:

26
Thierry Templier

Une façon de résoudre ce problème consiste à spécifier à partir de votre backend laquelle des paires {clé: valeur} de vos en-têtes que vous souhaitez exposer.

En utilisant un serveur Java, vous pouvez ajouter les lignes suivantes:

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

Et maintenant, vous pouvez accéder à cet élément cookie avec votre angulaire de cette façon

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

Plus d'explication ici

5
edkeveked

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

ou vous pouvez prendre référence de https://angular.io/docs/ts/latest/api/http/index/Headers-class.html

3
Kanad Chourasia

Comme décrit ici

Vous devez définir la permission du producteur pour accéder aux en-têtes en tant que - 

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization, X-Custom-header");
header("Access-Control-Expose-Headers: X-Custom-header");

Et en angulaire, vous pouvez le faire -

this._http.get(url, options).toPromise()
            .then(res => {
                var data = res.headers.get('X-Custom-header');
                console.log(data);
                return res;
            })

Vérifiez-le.

2
Bopsi

Vous devez exposer les en-têtes côté serveur. Certains en-têtes sont autorisés à accéder à partir du client, comme le type de contenu, mais pas tous. Pour plus de détails, consultez le paragraphe: 'Accès-Contrôle-Exposé-En-têtes (facultatif)' dans http://www.html5rocks.com/en/tutorials/cors/

1
grueny

Cela m'a stoppé pendant une heure. Bien que le débogueur Chrome affiche l'en-tête "Emplacement", je n'ai pas pu le lire dans [email protected] avec Microsoft.AspNetCore.Mvc 2.0.0.

Il s'avère que c'était un problème de la SCRO. Le correctif était un one-line dans Startup.cs:

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

Et maintenant je peux lire l'en-tête en angulaire:

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

Je ne suis pas sûr de savoir comment Chrome peut le voir, mais pas angulaire - cela fait évidemment toujours partie de la réponse réelle de l'API Web.

1
mkaj

La réponse est simple, il suffit d’utiliser la fonction Emplacement de url intérieur carte fonction

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

Une autre solution avec Angular 4.2. +; 

Un service 

getProfile(data) {
   return this.httpClient
      .request(new HttpRequest("POST", this.url, {}));
}

Composant 

this.userService.getProfile().subscribe(
  (response: any) => {
    if (response.type === HttpEventType.Response) {
      // response.headers is here
    }
  },
  (error: HttpErrorResponse) => {
    this.showMessage("error", "An error occurred");
  }
);
0
Rahmathullah M