0

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?

URL87
  • 10,667
  • 35
  • 107
  • 174
Tranquillity
  • 237
  • 2
  • 9
  • Did you inspect the error response and tried to address it? – kryger Oct 30 '17 at 08:24
  • Well, it's `new XMLHttpRequest()` for a start. – Andy Oct 30 '17 at 08:25
  • @krger , I am getting Failed to load https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&callback=?: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://null.jsbin.com' is therefore not allowed access. But why I am not getting same error with getJSON. – Tranquillity Oct 30 '17 at 08:27
  • @Andy with new XMLHttpRequest(), it is giving same error. – Tranquillity Oct 30 '17 at 08:33
  • Have you signed up for an API key? I think you need one of those. – Andy Oct 30 '17 at 09:00
  • @Andy, I think for public feed, we do not need, also because since it is working with getJSON without API key. – Tranquillity Oct 30 '17 at 09:05
  • Look at the response to the getJSON version in your browser. It starts `jsonFlickrFeed({`. So it's not JSON, it's a callback (i.e. JSONP). jQuery must be silently working that out - if you look at the actual URL generated and send, it includes a callback value. I think you'll have formulate your raw JS query as JSONP - I'm sure there are examples around. It's not a straight reading of a JSON object. – ADyson Oct 30 '17 at 10:16
  • @ADyson, yes you are right, here is the endpoint which return json object with out callback. https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&nojsoncallback=1 , can we call this endpoint with native ajax call ... or it just flicker do no allow .. – Tranquillity Oct 30 '17 at 10:24
  • I would guess you probably can...why not try it? – ADyson Oct 30 '17 at 10:34
  • @ADyson, I added/update sample code (calling endpoint without callback) and not working, could you help me to figure out what I am missing. – Tranquillity Oct 30 '17 at 10:50

1 Answers1

3

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I have updated the question and made is simple. No I am not using an endpoint with callback option. If you run the endpoint on the browser it gives you the json object. I tried JSONP and seems fine but is there any solution without JSONP and jquery. – Tranquillity Oct 30 '17 at 11:03
  • @Tranquillity — "No I am not using an endpoint with callback option": You were before you edited the question. "If you run the endpoint on the browser it gives you the json object." — It does now, it didn't with the original URL (when it gave JSONP). "is there any solution without JSONP" — Yes, you use the proxy as I described in the answer. "and jquery" — There is no requirement to involve jQuery to use JSONP. The Wikipedia article on JSONP explains how to use it. As do lots of SO questions [like this one](https://stackoverflow.com/questions/10193085/confused-on-how-a-jsonp-request-works). – Quentin Oct 30 '17 at 11:09
  • Thank you @quentin, so if I understood correctly, we cannot use native ajax call to that endpoint(even without callback) as you mentioned the Flickr API doesn't support CORS and the only solution is either using jquery or changing CORS setting into the server, isn't it? – Tranquillity Oct 30 '17 at 12:35
  • No. You can't use XMLHttpRequest to that end point because it doesn't support CORS. You can't change the CORS on the server because you are not Flickr so cannot change Flickr's servers. The solution is either using a different end point which acts as a proxy, or using JSONP. There is no need to use jQuery (although it is very convienient to do so). You can use a proxy without jQuery. You can use JSONP without jQuery. – Quentin Oct 30 '17 at 12:39
  • I observed interesting behavior, the above code fails in JSbin, JSfiddle or Codepen but the first time I tried locally under my localhost (abc.local.com) and it works there is no issue of cross-domain. What could be the reason? You think it is just because they are blocked by Flickr server. – Tranquillity Oct 30 '17 at 13:44