I am trying to search images on Wikimedia Commons, using MediaWiki API. Here is my requested URL with search params:
https://commons.wikimedia.org/w/api.php?action=query&list=allimages&format=json&aifrom=Dada
I am succeed to get response in JSON format, but I could not read it programmatically because:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Any advice?
UPDATE:
I have added one more param to the url: callback=JSON_CALLBACK
, which transforms response to jsonp format. Now it possible to use angular $http.jsonp()
method also.
use jsonp
1 as dataType
to prevent the "No 'Access-Control-Allow-Origin' header is present on the requested resource." error. Then it works :
$.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');
})
}
})
Here I add each image to a #images
<div>
just for demonstration purposes.
demo -> http://jsfiddle.net/52g2Lazw/
1) JSONP stands for “JSON with Padding” and it is a workaround for loading data from different domains. It loads the script into the head of the DOM and thus you can access the information as if it were loaded on your own domain, thus by-passing the cross domain issue cite.