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

在我的情况下，我必须添加＆＃39; x-xsrf-token ＆＃39; “访问控制 - 允许 - 标题”的价值＆＃39;头：

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

请参阅AngularJS: POST Data to External REST API

Answer 3

这帮助了我java（暴露标题然后包含在allow标题中）。然后，这将显示在您的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 4

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

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

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

5 个答案: