Как прочитать ответ MediaWiki API JSON

Question

Я пытаюсь искать изображения в Wikimedia Commons, используя MediaWiki API. Вот мой запрошенный 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() метод тоже.

Answer 1

Использование jsonp ¹ как dataType для предотвращения появления ошибки " Нет Access-Control-Allow-Origin" в запрашиваемом ресурсе. " Тогда это работает:

$.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, и, таким образом, вы можете получить доступ к информации, как если бы она была загружена в вашем собственном домене, таким образом, минуя междоменную проблему.

Answer 2

Если вы получаете доступ к API Wikimedia Commons из вики Wikimedia, вы можете использовать origin Параметр API и таким образом сделать API установкой заголовков CORS. Например, на https://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 может привести к большому количеству полезных результатов.