Flickr API call with XMLHttpRequest not working

Question

I am trying to get a list in JSON result from Flickr and plain js XMLHttpRequest not working.

Here is ajax call example with no callback and not working

 var url = "https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&nojsoncallback=1"; xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { console.log(xhr.status); console.log(xhr.readyState); if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); console.log(data); }else { console.log("error"); } } xhr.open("GET", url) xhr.send(); 

I'm getting the error -

js:1 Access to XMLHttpRequest at 'https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&nojsoncallback=1' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

could you tell me where is the problem?

Answer 1

The Flickr API doesn't support CORS. There is no way to access it directly, from JS embedded in a webpage on a different origin, without using the JSONP API.

Flickr does provide an XML version (remove format=json&callback=? from the URL) and a plain JSON version (use format=json&nojsoncallback=1 ) but without Flickr's granting permission with CORS you can't access it directly. You could use a proxy server (either one on the same origin as your webpage, or one which inserts CORS into the response).

---

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null.jsbin.com'; is therefore not allowed access. But why I am not getting same error with getJSON

Because jQuery uses the JSONP technique instead XMLHttpRequest when you have callback=? in the URL.