Angular2:Access-Control-Allow-Headers不允许使用X-XSRF-TOKEN

Question

我正在努力解决这个问题,因为我正在实施跨站点API调用.最糟糕的是它在我的本地环境中运行良好但是一旦在heroku上运行,它会因以下错误而失败:

XMLHttpRequest无法加载https://restcountries.eu/rest/v1/all.在预检响应中,Access-Control-Allow-Header不允许请求标头字段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:POST数据到外部REST API