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
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:
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
.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
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.
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/
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.
La réponse est simple, il suffit d’utiliser la fonction Emplacement de url intérieur carte fonction
.map((data: Response) => { response.url })
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");
}
);