Использование Fetch API для получения мерцающей ленты в формате json

Мне удается получить json-ответ от flicker feed api с помощью $.getJSON, но когда я пытаюсь сделать это с помощью Fetch, мне кажется, что я получаю только XML-ответ.

Это работает:

var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON(flickerAPI, {
                    tags: "searchTerm",
                    tagmode: "any",
                    format: "json"
                })
                .done(function (data) {
                   //....
                });

Это не работает:

var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

var request = new Request(flickerAPI, { 
                mode: 'no-cors',
                tags: 'searchTerm',
                tagmode: 'any',
                format: 'json'
            });

            fetch(request)
                .then(function (res) {
                    return res.json();
                })
                .then(function (text) {
                    console.log(text);
                });

Я также хотел бы понять, почему при использовании Fetch API я получаю: «В запрошенном ресурсе отсутствует заголовок« Access-Control-Allow-Origin ». Таким образом, нулевой источник Origin не имеет доступа. Если непрозрачный ответ служит ваши потребности, установите режим запроса на «no-cors», чтобы получить ресурс с отключенным CORS». а при использовании $.getJSON нет. Спасибо !!


javascript json cors flicker fetch-api
person Amalin    schedule 19.03.2017    source источник
comment
я никогда не использовал API и выборку, но согласно документам flickr.com/ services/feeds/docs/photos_public (теги, режим тегов, формат, ...) являются параметрами запроса, что означает, что они должны быть в самом URL-адресе, photos_public.gne?format=json&tagmode=any&jsoncallback=... ??   -  person Yazan    schedule 19.03.2017
comment
Вы когда-нибудь находили способ сделать это с помощью fetch()? Сейчас я пытаюсь сделать то же самое и получаю ту же ошибку. Надеясь, что не придется переключаться на jsonp   -  person pixelwiz    schedule 22.10.2017

Ответы (1)


arrow_upward
5
arrow_downward

Краткий ответ: аргументы метода fetch(…) и поведение метода fetch(…) сильно отличаются от аргументов метода $.getJSON(…) и поведения метода $.getJSON(…), поэтому нельзя ожидать, что fetch(…) будет делать что-то подобное тому, что делает $.getJSON(…).

Более длинный ответ, отвечая на ваши конкретные вопросы:

Я также хотел бы понять, почему при использовании Fetch API я получаю: «На запрошенном ресурсе отсутствует заголовок« Access-Control-Allow-Origin »… а при использовании $ .getJSON нет.

URL вашего запроса содержит подстроку callback=?, поэтому $.getJSON обрабатывает ее как JSONP:

Если URL-адрес включает строку «callback=?» (или аналогичный, как определено серверным API), вместо этого запрос обрабатывается как JSONP.

… это означает, что за кулисами, вместо того, чтобы отправлять кросс-оригинальный запрос из JavaScript, он вместо этого создает элемент script, который загружает ответ JSONP. Поскольку браузеры позволяют использовать элемент script для загрузки скриптов из разных источников, это никогда не сталкивается с какими-либо ограничениями.

Но когда вы выполняете вызов с помощью Fetch API, это не делает никакой закулисной магии для автоматического распознавания запроса как запроса JSONP на основе URL-адреса и не создает элемент script для загрузки ответа. Вместо этого он просто вызывает запрос, сделанный непосредственно на этот URL-адрес http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?".

Но http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?" на самом деле не предназначен для использования с Fetch API или XHR, поэтому ответ, который он отправляет обратно, не включает заголовок ответа Access-Control-Allow-Origin.

В соответствии с протоколом CORS для браузера отсутствие этого заголовка ответа Access-Control-Allow-Origin означает «Не подвергайте этот ответ никакому клиентскому JavaScript, работающему в веб-приложении».

Таким образом, ваш браузер регистрирует, что «На запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'. Таким образом, Origin 'null' не разрешен доступ», чтобы вы знали, что ваш скрипт не сможет получить доступ к ответу и почему.

Если вы устанавливаете mode: 'no-cors', я не ожидал, что вы увидите это сообщение. Но вы в принципе никогда не захотите устанавливать mode: 'no-cors' в любом случае, потому что это имеет тот же эффект, что и отсутствие заголовка ответа Access-Control-Allow-Origin — оно вообще предотвращает доступ вашего скрипта к ответу.

Что касается ожидания того, что tags: 'searchTerm', tagmode: 'any' и format: 'json' будут иметь какой-либо эффект, если вы укажете их в объекте, который вы указываете в качестве второго аргумента метода fetch(…), комментарий @Yazan выше верен: это настраиваемые параметры запроса для flickr API, поэтому если вы выполняете запрос GET с помощью Fetch API, вам нужно указать их в URL-адресе в качестве параметров запроса.

$.getJSON, напротив, делает это автоматически:

Данные, отправляемые на сервер, добавляются к URL-адресу в виде строки запроса.

…где данные, которые он означает, являются объектами пар имя/значение, которые вы указываете в качестве второго аргумента для $.getJSON.

Напротив, для метода fetch(…) имена и значения, которые вы указываете во втором аргументе, не могут быть произвольными параметрами запроса. Вместо этого разрешен только предопределенный набор имен там:

  • method: Метод запроса, например, GET, POST.
  • headers: Любые заголовки, которые вы хотите добавить к вашему запросу.
  • body: Любое тело, которое вы хотите добавить к вашему запросу
  • mode: режим, который вы хотите использовать для запроса
  • credentials: учетные данные запроса, которые вы хотите использовать для запроса
  • cache: режим кэширования, который вы хотите использовать для запроса
  • redirect: режим перенаправления для использования
  • referrer: USVString, указывающая отсутствие ссылки, клиент или URL-адрес.
  • referrerPolicy: указывает значение HTTP-заголовка реферера.
  • integrity: содержит значение целостности подресурса запроса.
person sideshowbarker    schedule 19.03.2017