在预检错误中获取 Access-Control-Allow-Headers答案

【问题标题】：Getting Access-Control-Allow-Headers in preflight error在预检错误中获取 Access-Control-Allow-Headers
【发布时间】：2018-04-25 20:01:11
【问题描述】：

我已经创建了 angular js 应用程序，我在其中集成了 twitch api，该 api 是

 return $http({
        url: "https://api.twitch.tv/kraken/streams",
        method: "GET",
        params: { channel: channel, limit: 1 },
        headers: { "Client-Id": "XXXXXXXXXXXXXXX" }
    })

问题是当我重新加载页面时 api 正在工作，但是当我的状态更改而没有重新加载页面时，我从这个 api 收到跨源错误。错误是

加载 https://api.twitch.tv/kraken/streams?channel=eliazOne&limit=1 失败：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 RefreshToken。

任何人都知道如何解决交叉错误

【问题讨论】：

标签： angularjs api twitch

【解决方案1】：

当您向其他域发出请求时，这称为跨域请求。也称为 CORS 请求。

当您将数据 POST / PUT 到不同的域时，它将首先发出 OPTIONS 请求。这是为了确保服务器在响应中具有 Access-Control-Allow-Headers。这些标头应该允许访问您发出请求的域。如果这些标头不存在，那么当发出 OPTIONS 请求时，它将失败并且永远不会发出 POST / PUT。

简单的答案是将这些标头添加到您的服务器。

【讨论】：

但是 API 是由 twitch 开发人员制作的，所以我无法在服务器上设置标题
好的，那么你只有两个选择。创建自己的服务器。将请求发送到您的服务器。然后将请求从您的服务器发送到抽搐服务器。这称为代理请求。另一种选择是让您的网络服务器重写请求。这两个选项都有效，因为 CORS 仅由浏览器强制执行。

【解决方案2】：

我不知道这是 Angular 默认自己做的事情，还是你代码中其他地方的错误，但你或 Angular 正在发送 RefreshToken 标头作为失败请求的一部分，这不是飞行前 OPTIONS 请求中的每个 Access-Control-Allow-Headers 响应标头都允许。

$ curl -XOPTIONS https://api.twitch.tv/kraken/streams -is | grep Headers
Access-Control-Allow-Headers: Accept, Accept-Language, Authorization, Client-Id, Twitch-Api-Token, X-Forwarded-Proto, X-Requested-With, X-Csrf-Token, Content-Type, X-Device-Id

这是所有跨域请求都会做的事情。浏览器发送一个 OPTIONS 请求，以确保它即将发出的真实请求符合跨域服务器设置的标准。

【讨论】：

【解决方案3】：

您需要添加一个 ?callback=?使用您传递的 URL 以及回调函数。请点击链接How to use JQuery to Access Twitch streams 这是 JQuery 示例，但概念相同。

$.getJSON('https://api.twitch.tv/kraken/streams/' + name + '?callback=?', 
    function(channel){
        if (channel["stream"] == null) {
            $("#all").append("<p>" + channel._links.self + "</p>");
        } 
        else {
           $("#all").append("<p>Fail</p>");   
        }
    });
});

【讨论】：