Question

我正在为Twitch.tv应用程序编写HTML / CSS / JS。我通过主API endpoint（api.twitch.tv）请求（公共，非敏感）数据，但尚未集成一个数据。但是，此数据可在另一个子域（tmi.twitch.tv）中查看。不幸的是，当我进行$ .getJSON调用（或带有dataType：JSON的$ .AJAX）时，我在Firefox 44.0.2中收到以下内容：

阻止跨源请求：同源策略禁止在https://tmi.twitch.tv/ {其余URL}读取远程资源。（原因：CORS标题＆＃39; Access-Control-Allow-Origin＆＃39;缺失）。

我已将此安全机制称为用户，但不是（新手）程序员。我试图管理很多，但我仍然迷失了。

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

我尝试了什么： 我已通过?callback=，?callback=differentStrings和?otherQuery=value&callback=differentStrings添加了我的请求网址。这些都行不通。我将我的dataType更改为jsonp，没有额外的查询字符串（只更改dataType附加了两个查询字符串：callback = jQuery {long number} _ {long number}＆amp; _ = {long number}，我没有收到x-origin但是，我确实得到了以下内容：

SyntaxError：missing;在声明之前|第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课程）。提前感谢您的想法和评论。

（编辑）我的功能：

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

您可以通过在请求中添加标头来完成此操作

    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',
        headers: {

                    'Access-Control-Allow-Origin':URLofOrigin

                       },
        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 3

试试这个 - https://api.allowallorigin.com/restapi?url=https://tmi.twitch.tv/hosts?include_logins=1&target=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();
            }
        });
    });
}

跨源JSON请求

3 个答案: