Using the Fetch API to flicker feed in json format

Question

I will be able to get the json response from the flicker feed api using $ .getJSON, but when I try to do this using Fetch i, it looks like it is getting an XML response.

It works:

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

This does not work:

 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); }); 

I would also like to understand why when using the Fetch API I get: The "No" header "Access-Control-Allow-Origin" is present in the requested resource. Therefore, the original "null" is not allowed. If an opaque response suits your needs, set the request mode to "no-cors" to retrieve the resource with CORS disabled. "And when using $ .getJSON no. Thanks!

Answer 1

Short answer: the arguments for the fetch(…) method and the behavior of the fetch(…) method are very different from the arguments for the $.getJSON(…) method and the behavior of the $.getJSON(…) method, so you cannot expect fetch(…) > to do something like what $.getJSON(…) does.

Longer answer, answering your specific questions:

I would also like to understand why when using the Fetch API I get: the No header of Access-Control-Allow-Origin is present on the requested resource ... and when using $ .getJSON no.

Your request url contains the substring callback=? , so $.getJSON treats it as JSONP :

If the URL contains the string "callback =?" (or similarly, as defined by the server-side API), the request is processed as JSONP.

... which means that instead of a scene, instead of sending a cross-origin request from JavaScript, a script element is created instead that loads the JSONP response. Because browsers allow you to use a script element to load cross-origin scripts that never come in any kind of restriction.

But when you make a call using the Fetch API, it does not do any behind-the-scenes magic to automatically recognize the request as a JSONP request based on the URL and does not create a script element to load the response. Instead, it simply calls the request made directly to this http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?" URL.

But http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?" not really intended to be used with the Fetch or XHR API, so the response it sends back does not include the response header Access-Control-Allow-Origin .

In the CORS protocol for the browser, the lack of an Access-Control-Allow-Origin response header means "Dont expose this response to any client-side JavaScript running in the web application."

Thus, your browser registers that the No header of Access-Control-Allow-Origin is present on the requested resource. The "null" message is therefore not allowed to access, so you know that your script will not be able to access the response and why.

If you set mode: 'no-cors' , I would not expect you to see this message. But in principle, you never want to set mode: 'no-cors' anyway, because it has the same effect as the lack of an Access-Control-Allow-Origin response header - it prevents any of your responses from accessing the script.

---

If you expect tags: 'searchTerm' , tagmode: 'any' and format: 'json' will have some effect if you specify them in an object that you specify as the second argument to the fetch(…) method given @Yazans comment above is right: these are custom request parameters for the flickr API, so if you are making a GET request with the Fetch API, you need to specify them in the URL as request parameters.

$.getJSON , by contrast, does this automatically :

The data that is sent to the server is added to the URL as a query string.

... where the data it means is the name / value pair objects that you give as the second argument to $.getJSON .

In contrast, for the fetch(…) method, the names and values ​​that you specify in the second argument are not arbitrary query parameters. Instead, a predefined set of names is allowed :

• method : request method, e.g. GET, POST.
• headers : any headers you want to add to your request.
• body : any body that you want to add to your request.
• mode : the mode you want to use for the request
• credentials : the credentials of the request you want to use for the request
• cache : the caching mode you want to use for the request
• redirect : redirect mode to use
• referrer : USVString indicating no-referrer, client, or URL
• referrerPolicy : Indicates the HTTP referrer header value
• integrity : contains the value of the integrity of the request subresource