Angular2：Access-Control-Allow-Headers 不允许 X-XSRF-TOKEN

Question

我今天在实现跨站点 API 调用时遇到了这个问题。最糟糕的是它在我的本地环境中运行良好，但一旦在heroku上，它就会失败并出现以下错误：

XMLHttpRequest 无法加载 https://restcountries.eu/rest/v1/all。预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 X-XSRF-TOKEN。

这是触发调用的函数：

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

  return observable;

有什么想法吗？

谢谢。

Answer 1

有同样的问题。
就我而言，原因是在我的 Chrome cookie 中保存了 X-XSRF-TOKEN 字段。 Chrome 以某种方式向 OPTION 请求添加了标头“Access-Control-Request-Headers: x-xsrf-token”。在 Firefox 中，同一页面可以正常工作，在 Chrome 的隐身模式下也是如此。
所以我只是删除了这个 cookie 字段 (X-XSRF-TOKEN) 就这样了。

Answer 2

就我而言，我必须将 'x-xsrf-token' 值添加到 'Access-Control-Allow-Headers' 标头：

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

参见 AngularJS：将数据发布到外部 REST API

Answer 3

我清除了cookie，这解决了问题。

Answer 4

这在 java 中对我很有帮助（公开标头，然后包含在允许标头中）。然后这将显示在您的 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");

Answer 5

原因是

x-xsrf-token

关键字不在响应头

Access-Control-Allow-Headers

中。

我使用以下解决方案在java中解决了这个问题：

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;
}