Angular2: X-XSRF-TOKEN ist nicht zulässig von Access-Control-Allow-Header

Question

Ich habe heute mit diesem Problem zu kämpfen, da ich eine Cross-Site-API-Aufruf implementieren. Das Schlimmste ist es gut von meinem lokalen Umfeld funktioniert, aber einmal auf Heroku, schlägt es mit dem folgenden Fehler:

XMLHttpRequest cannot load https://restcountries.eu/rest/v1/all . Request header field X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response.

Hier wird die Funktion Auslösung des Anrufs:

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

    return observable; 

Jede Idee?

Danke.

Answer 1

In meinem Fall hatte ich den 'x-XSRF-Token' Wert 'Access-Control-Allow-Headers' Header hinzuzufügen:

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

siehe AngularJS: POST Data to External REST API

Answer 2

Haben die gleichen Problem.
In meinem Fall war der Grund, dass in meinem Chrome-Cookies X-XSRF-TOKEN Feld gespeichert wurde. Und irgendwie hat Chrome den Header 'Access-Control-Request-Headers: x-xsrf-token' zur OPTION-Anfrage hinzugefügt. In Firefox funktioniert die gleiche Seite auch im Inkognito-Modus Chrome.
Also ich habe gerade löschen dieses Cookie-Feld (X-XSRF-TOKEN) und das ist alles.

Answer 3

das half mir in Java (die Header freizugeben und dann in die Header zulassen). Dies wird zeigen, dann in Ihrem Httpresponse-Objekt:

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

Answer 4

Client (Angular 4)

@Injectable() 
export class HttpService { 
    private actionUrl: string; 
    private headers: Headers; 
    private options: RequestOptions; 

    constructor(public _http: Http) { 
    this.actionUrl = 'example.com'; 
    this.headers = new Headers(); 
    this.headers.append('Content-Type', 'application/json'); 
    this.headers.append('Accept', 'application/json'); 
    this.headers.append('Access-Control-Allow-Headers', 'Content-Type, X-XSRF-TOKEN'); 
    this.options = new RequestOptions({ headers: this.headers }); 
    } 

Server

GET, POST

1) Access-Control-Allow- Ursprung: '*'

OPTIONS

1) Access-Control-Allow-Origin: '*'

2) Access-Control-Allow-Header: ‚Content-Type, X-Amz-Date, Authorization, X-Api -Key, X-Amz-Sicherheit-Token, X-XSRF-TOKEN Access-Control-Allow-Headers'

3) Access-Control-Allow-Methoden: 'POST, GET, OPTIONS'