3

我正在尝试使用 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”标头。

有什么建议吗？

更新：

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

4

2 回答 2

3

使用1来防止“请求的资源上不存在“没有 'Access-Control-Allow-Origin' 标头。 ”错误。然后它工作：jsonpdataType

$.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/

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

于 2015-11-01T09:02:00.460 回答
1

如果您从 Wikimedia wiki访问 Wikimedia Commons API ，您可以使用 API 的origin参数，这样可以使 API 设置CORS 标头。例如在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可能会产生大量有用的结果。

于 2015-11-14T17:39:29.743 回答