Angular2 : X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers

Question

I am struggling with this issue today as I am implementing a cross-site API call. The worst thing is it works well from my local environment but once on heroku, it fails with the following error:

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.

Here is the function triggering the call:

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

  return observable;

Any idea ?

Thanks.

Answer 1

Had the same issue.
In my case the reason was that in my Chrome cookies was saved X-XSRF-TOKEN field. And somehow Chrome added header 'Access-Control-Request-Headers: x-xsrf-token' to OPTION request. In Firefox the same page works fine, in incognito mode Chrome - too.
So I've just delete this cookies field (X-XSRF-TOKEN) and that's all.

Answer 2

In my case I had to add the 'x-xsrf-token' value to 'Access-Control-Allow-Headers' header:

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

see AngularJS: POST Data to External REST API

Answer 3

I cleared cookies, this solved problem.