Question

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

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

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

请求时没有'Access-Control-Allow-Origin'标头资源。

有什么建议吗？

更新

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

Answer 1

使用 jsonp ¹作为dataType来阻止＆＃34; 否＆＃ 39;访问控制允许来源＆＃39;标头出现在请求的资源上。＆＃34;错误。然后它工作：

$.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>仅用于演示目的。

演示 - ＆gt;的 http://jsfiddle.net/52g2Lazw/

^{1 ）} JSONP代表“带填充的JSON”，它是一种从不同域加载数据的解决方法。它将脚本加载到DOM的头部，因此您可以像访问自己的域一样访问信息，从而绕过跨域问题^cite。

Answer 2

如果您从维基媒体wiki 访问Wikimedia Commons API ，则可以使用API的origin参数，这样就可以设置API CORS headers。例如。在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进行简单的网络搜索可能会产生大量有用的结果。

如何阅读MediaWiki API JSON响应

2 个答案: