Question

我创建了角度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。

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

Answer 1

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

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

有关详细信息，请参阅此处https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests

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

Answer 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请求，以确保跨域服务器设置的标准允许它要发出的真实请求。

Answer 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>");   
        }
    });
});

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

3 个答案: