如何阅读 MediaWiki API JSON 回复

Question

我正在尝试使用 MediaWiki API 在 Wikimedia Commons 上搜索图像。这是我请求的 URL 和搜索参数：

https://commons.wikimedia.org/w/api.php?action=query&list=allimages&format=json&aifrom=Dada

我成功获得了 JSON 格式的响应，但我无法以编程方式读取它，因为：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

有什么建议吗？

更新：

我在 url 中又添加了一个参数：callback=JSON_CALLBACK，它将响应转换为 jsonp 格式。现在也可以使用 angular $http.jsonp() 方法。

Answer 1

使用jsonp¹作为dataType来防止“No 'Access-Control-Allow-Origin' header is present on the requested resource.”错误。然后就可以了：

$.ajax({
    dataType: 'jsonp',
    url : 'https://commons.wikimedia.org/w/api.php?action=query&list=allimages&format=json&aifrom=Dada',
    success : function(json) {
        json.query.allimages.forEach(function(item) {
            $('<img/>', { src : item.url }).appendTo('#images');
        })    
    }     
})    

这里我将每个图像添加到 #images <div> 只是为了演示目的。

演示 -> http://jsfiddle.net/52g2Lazw/

¹⁾ JSONP 代表“JSON with Padding”，它是一个解决方法从不同域加载数据。它将脚本加载到 DOM 的头部，因此您可以像在您自己的域中加载一样访问信息，从而绕过跨域问题 ^cite.

Answer 2

如果您从维基媒体 wiki 访问维基共享资源 API ，您可以使用 API 的 origin 参数和通过这种方式进行 API 设置 CORS headers. E.g. on en.wikipedia.org，您可以通过这种方式访问​​ Commons API：

$.get('https://commons.wikimedia.org/w/api.php?' +
    $.param({
        format: 'json',
        action: 'query',
        list: 'allimages',
        aifrom: 'Dada',
        origin: location.protocol + '//' + location.host
    })).done(function() { /*...*/ });

使用JSON（纯数据格式）通常比加载和执行JavaScript（JSONP）文件更安全从理论上讲，这可能会对您的访客做坏事。我可能会为此目的设置一个代理服务器，而不是使用 JSONP。在网络上搜索 set up a proxy json 可能会得到很多有用的结果。