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

【问题标题】：Angular2 : X-XSRF-TOKEN is not allowed by Access-Control-Allow-HeadersAngular2：Access-Control-Allow-Headers 不允许 X-XSRF-TOKEN
【发布时间】：2016-11-30 02:32:02
【问题描述】：

我今天正在努力解决这个问题，因为我正在实施跨站点 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;

有什么想法吗？

谢谢。

【问题讨论】：

那个不需要服务器配置，与Angular2无关。另请参阅stackoverflow.com/questions/10143093/…
感谢君特的回答。我知道这不是 Angular 但应该有某种解决方法？但是当我尝试替换 Access-Control-Request-Headers 时，它显示“拒绝设置不安全的标头”。
我不知道你在哪里替换标题，我不知道你的意思是什么解决方法。 Angular 不参与其中，预检请求是由您的浏览器而不是 Angular 创建的。只有在对预检请求的响应包含正确的标头之后，浏览器才会执行由 Angular 发起的实际请求。
感谢您的跟进。我没有说它是有角度的，我在标题中提到了有角度的，因为这是我在这里使用的技术。它可以在本地工作，但是一旦在 heroku 上它就会失败......就是这样。
如果您访问不同的 URL（即使只有端口不同），浏览器需要 CORS 标头。您必须查看如何在 Heroku 上配置它们。

标签： heroku angular xmlhttprequest cors

【解决方案1】：

原因是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;
                }

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

这在 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");

【讨论】：

【解决方案4】：

遇到同样的问题。
就我而言，原因是在我的 Chrome cookie 中保存了 X-XSRF-TOKEN 字段。并且不知何故，Chrome 将标题 'Access-Control-Request-Headers: x-xsrf-token' 添加到 OPTION 请求中。在 Firefox 中，相同的页面也可以正常工作，在隐身模式 Chrome 中也是如此。
所以我刚刚删除了这个 cookie 字段 (X-XSRF-TOKEN)，仅此而已。

【讨论】：

非常感谢，我很难找到类似问题的答案
当然，没问题。很高兴为您提供帮助）
非常感谢@zahar_g。但现在我想知道。什么时候生产？它会发生在我的用户身上吗？

【解决方案5】：

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

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

见AngularJS: POST Data to External REST API

【讨论】：

我有一个应用程序将 X-XSRF-TOKEN 作为所有请求的默认值。这是允许 CORS 请求通过的最简单方法。