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 th

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

I cleared cookies, this solved problem.

Answer 3

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 4

this helped me in java (expose the headers and then include in the allow headers). This will then show in your HttpResponse object:

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 5

The reason is that x-xsrf-token keyword is not in response header Access-Control-Allow-Headers.

I solved this problem in java using following solution:

rsp.setHeader("Access-Control-Allow-Methods", "GET,HEAD,POST,OPTIONS,PUT,DELETE,TRACE,CONNECT");
                rsp.setHeader("Access-Control-Allow-Headers", "cache-control,content-type,hash-referer,x-requested-with, x-xsrf-token");
                if ("OPTIONS".equals(req.getMethod())) {
                    rsp.setStatus(HttpServletResponse.SC_OK);
                    return;
                }