web-dev-qa-db-fra.com

Angular2: X-XSRF-TOKEN n'est pas autorisé par Access-Control-Allow-Headers

Je suis aux prises avec ce problème aujourd'hui alors que je suis en train de mettre en œuvre un appel d'API intersite. Le pire, c’est que cela fonctionne bien dans mon environnement local, mais une fois sur heroku, il échoue avec l’erreur suivante:

XMLHttpRequest ne peut pas charger https://restcountries.eu/rest/v1/all . Le champ d'en-tête de demande X-XSRF-TOKEN n'est pas autorisé par Access-Control-Allow-Headers dans la réponse de contrôle en amont.

Voici la fonction qui déclenche l'appel:

  let observable = this._http
    .get(GEO_API_URL + query)
    .map(response => response.json())
    .do(val => {
      this.cache = val;
      observable = null;
    })
    .share();

  return observable;

Une idée ?

Merci.

9
kfa

Avait le même problème.
Dans mon cas, la raison était que, dans mes cookies Chrome, le champ X-XSRF-TOKEN était enregistré. Et d’une manière ou d’une autre, Chrome a ajouté l’en-tête «En-têtes de contrôle d’accès: x-xsrf-token» à la demande OPTION. Dans Firefox, la même page fonctionne bien, en mode incognito Chrome - aussi. 
Je viens donc de supprimer ce champ de cookies (X-XSRF-TOKEN) et c'est tout.

37
zahar_g

Dans mon cas, j'ai dû ajouter la valeur 'x-xsrf-token' à l'en-tête 'Access-Control-Allow-Headers':

header('Access-Control-Allow-Headers: Content-Type, x-xsrf-token')

voir AngularJS: API POST Données vers externe REST

7
LeonardoX

J'ai effacé les cookies, ce problème résolu.

cela m'a aidé en Java (exposer les en-têtes puis les inclure dans les en-têtes autoriser) Cela montrera ensuite dans votre objet HttpResponse:

response.addHeader("Access-Control-Expose-Headers", "header1");
response.addHeader("Access-Control-Expose-Headers", "header2");
    response.addHeader("Access-Control-Expose-Headers", "header3");
                response.addHeader("Access-Control-Allow-Headers", "Origin, header1, header2, header3, X-Requested-With, Content-Type, Accept");
0
arn-arn