Angular2：Access-Control-Allow-Headers不允许使用X-XSRF-TOKEN [英] Angular2 : X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers

问题描述

今天我正在努力解决这个问题，因为我正在实施跨站点API调用。最糟糕的是它在我的本地环境中运行良好，但是一旦在heroku上运行，它会失败并出现以下错误：
$ b

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

以下是函数触发调用：

  let observable = this._http 
 .get（GEO_API_URL + query）
。 map（response => response.json（））
 .do（val => {
 this.cache = val; 
 observable = null; 
}）
 .share（）; 
 
返回可观察; 
  

有什么想法？

谢谢。 / b>

解决方案

有同样的问题。

在我的情况下，原因是在我的Chrome cookies中已保存X-XSRF-TOKEN字段。不知何故，Chrome向OPTION请求添加了头部'访问控制请求头部：x-xsrf-token'。在Firefox中，同样的页面也能正常工作，Chrome也是无痕模式。

所以我刚刚删除了这个cookie字段（X-XSRF-TOKEN），这就是全部。

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.

解决方案

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.

这篇关于Angular2：Access-Control-Allow-Headers不允许使用X-XSRF-TOKEN的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！