XMLHttpRequest - flickr - cross origin header

Question

just having a play with the Flickr API and seem to be unable to successfully claw anything out of it.

I tried using Jquery code below

var flickrURL = "https://api.flickr.com/services/feeds/photos_public.gne?format=jsoncallback=?";
var flickrOptions = {
    tags: "cats",
    format: "json"
}
var ajaxCallback = function(data){
    console.log(data);
};
$.getJSON(flickrURL, flickrOptions, ajaxCallback);

I also tried the old vanilla route

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.flickr.com/services/feeds/photos_public.gne?format=jsoncallback=?");
xhr.onreadystatechange = function(data){
    console.log(data);
}
xhr.send();

I have used AJAX/XMLrequest successful but not with an API. The when the vanilla fails I'm getting 'No 'Access-Control-Allow-Origin' header' which I don't understand since it's meant to be an open feed and with the Jquery I'm getting 'jsonFlickrFeed is not defined'. Both of which I find very puzzling

Answer 1

You just have to do minor changes

var flickrURL = 

"https://api.flickr.com/services/feeds/photos_public.gne?format=jsoncallback=?";

var flickrOptions = {
    tags: "cats",
    format: "json"
}

var jsonFlickrFeed = function(data){
    console.log(data);
};

$.getJSON(flickrURL, flickrOptions);

Flickr response looks for jsonFlickrFeed function which was not defined in your case.

https://codepen.io/smtgohil/pen/ZXeYqB?editors=0010

You can check the console for output.