跨源JSON请求

Question

我正在为Twitch.tv应用程序编写HTML/CSS/JS。我通过他们的主要API端点(API.titch.tv(请求(公共的、非敏感的(数据，但有一条数据尚未集成。然而，这些数据可以在另一个子域(tmi.twitch.tv(中查看。不幸的是，当我调用$.getJSON(或带有dataType:JSON的$.AJAX(时，我在Firefox 44.0.2:中收到以下消息

阻止跨来源请求：同源策略不允许读取上的远程资源https://tmi.twitch.tv/｛URL的其余部分｝。(原因：缺少CORS标头"Access Control Allow Origin"(。

作为一名用户，我知道这种安全机制，但作为一名(新手(程序员，我并不知道。我读了很多书试图应付，但我还是迷路了。

我收集到的：一个常见的解决方法是请求JSONP。与JSON不同，浏览器不对JSONP强制执行跨源策略。我知道主要的Twitch API是JSONP友好的，并且可能启用了CORS。相比之下，我认为tmi.twitch.tv没有启用CORS。

我尝试过的：我已将请求URL附加为?callback=、?callback=differentStrings和?otherQuery=value&callback=differentStrings。这些都不起作用。我将dataType更改为jsonp，并且在没有附加查询字符串的情况下(只是更改dataType附加了两个查询字符串：callback＝jQuery｛long number｝_｛longnumber｝&_＝｛longname｝(，我没有收到x-origin块。然而，我确实得到了以下结果：

SyntaxError:缺少；before语句|第1行：字符8

对于我请求的这个对象：

{"hosts":[{"host_id":118084843,"target_id":41981587,"host_login":"politecpu","target_login":"politemaster"},{"host_id":118082906,"target_id":41981587,"host_login":"politerobot","target_login":"politemaster"}]}

我被卡住了。我不知道这是否是数据/JSONP格式的问题，也不知道我是否找到了x-origin的解决方法，因为我的成功(完全接收数据(功能不起作用。我接下来应该考虑什么？

我想强调的是，我是一个绝对的新手(我最近才完成JS和jQuery的Codecademy课程(。提前感谢您的想法和意见。

(编辑(我的功能：

var allHosts = [];  // To be compared against new JSON periodically called via checkHosts()
var getHosts = function() {
	allHosts = [];
	$.ajax({
		url: 'https://tmi.twitch.tv/hosts?include_logins=1&target=' + myID,
		dataType: 'jsonp',
		success: function(data) {
			data.hosts.forEach(function(element) {
				allHosts.push(element.host_id);
			});
			debug('getHosts():', 'data =', data, 'allHosts =', allHosts, 'queue =', queue, 'busy =', busy); // Not relevant
		},
	});
}

Answer 1

如图所示，您似乎正在尝试使用JSONP访问JSON资源。域不支持JSONP。

您可能能够使用服务器端语言来完成您想要的任务，该语言将代表用户获取资源。

Answer 2

您可以通过在请求中添加头来实现这一点

var allHosts=[]；//与通过checkHosts((定期调用的新JSON进行比较var getHosts=函数(({allHosts=[]；$.ajax({url:'https://tmi.twitch.tv/hosts?include_logins=1&target='+myID，dataType:'jsonp'，标头：｛
"访问控制允许来源"：URLofOrigin
}，成功：函数(数据({data.hosts.forEach(函数(元素({allHosts.push(element.host_id(；})；debug('getHosts((：'，'data='，data，'allHosts='，allHosts，'queue='，queue，'busy='，busy(；//不相关}，})；}

Answer 3

试试这个-https://api.allowallorigin.com/restapi?url=https://tmi.twitch.tv/hosts?include_logins=1&目标=007

我在尝试了多个选项后创建了此解决方案。同一行上的另一个解决方案完成了这项工作，但更改了JSON数据的位置，直到付费为止。以上服务是免费的，并将继续免费。如果人们觉得它有用，那么我可能会放一个主页和一些谷歌广告，但除此之外，在可预见的未来，它应该会继续免费。

下面是一个示例代码：

jPath.prototype.loadJSONDataFromUrl = function(_url, callback) {
    $.getJSON(_url, function(data) {
        $.fn.jsonData = JSON.stringify(data);
    }).done(function(json){
        if( callback != null) {
            callback();
        }
    }).fail(function(){
        $.getJSON('https://api.allowallorigin.com/allorigin/restapi?url='+_url, function(data) {
            console.log(data);
            console.log(JSON.stringify(data));
            $.fn.jsonData = JSON.stringify(data);
        }).done(function(json){
            if( callback != null) {
                callback();
            }
        });
    });
}