跨域 AJAX 调用 [重复]

Posted 2023-05-07

【中文标题】跨域 AJAX 调用 [重复]

【英文标题】：Cross-Domain AJAX Call [duplicate]

【发布时间】：2013-12-07 23:05:34

【问题描述】：

我正在尝试使用最新的 jQuery 为 Twitch.TV API 进行跨域 AJAX 调用，但出现错误。

代码：

 $.ajax(
    type: 'GET',
    dataType: "json",
    url: "https://api.twitch.tv/kraken/search/games?q=star&type=suggest",
    success: function (responseData, textStatus, jqXHR) 
        console.log("in");
        var data = JSON.parse(responseData['AuthenticateUserResult']);
        console.log(data);
    ,
    error: function (responseData, textStatus, errorThrown) 
        alert('POST failed.');
    
);

错误：

XMLHttpRequest 无法加载 https://api.twitch.tv/kraken/search/games?q=star&type=suggest。请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://codeeplus.net' 因此不允许访问。

【问题讨论】：

我确实看过那个帖子，但它对我一点用都没有。

api.jquery.com/jQuery.getJSON 看看en.wikipedia.org/wiki/JSONP

什么不适合您？反向代理应该可以正常工作。 twitch.tv 也支持 JSONP，只需在查询字符串中添加callback=whatever即可。

@user2812028 - 六个选项都不适合你？！这似乎不太可能。

【参考方案1】：

您需要 JSONP 来处理跨浏览器请求。您给我的链接与 getJSON jquery 函数一起工作正常。

对于流：http://jsfiddle.net/82wNq/27/

对于游戏：http://jsfiddle.net/82wNq/25/

$.getJSON("https://api.twitch.tv/kraken/search/games?q=star&type=suggest&callback=?", function (data) 
    $.each(data.games, function (index, item) 
        $("<div>").html(item.name).appendTo("#content");
        $("<img>").attr("src", item.box.medium).appendTo("#content");
    );
);

【讨论】：

这成功了！但是我将如何使用 /search/streams 而不是 /search/games 来做到这一点？我猜您需要将 data.games 更改为其他内容，我尝试仅使用数据但没有用。有任何想法吗？ @thenewseattle