Hi, I trying to get image from the instagram api, but I am getting an error No 'Access-Control-Allow-Origin'

Question

$(document).ready(function(){


 var paramter = "https://www.instagram.com/nike/media/&callback=?";
  console.log(paramter);
  $.getJSON(paramter ,function(json)

  {
        var birdpic = " ";
        var data = json.items;
        birdpic +="<div class='pics'><img src='"+data[0].images.low_resolution.url+" '></div>";
       $("<div/>").appendTo("#picture").append(birdpic);

  });

});

So, I tried adding the callback to the end https://www.instagram.com/nike/media/q=callback

Is this right format

Now, I am getting

jquery-3.1.0.js:9471 
GEThttps://www.instagram.com/nike/media/&callback=jQuery31007809933559544142_1478278811621?_=1478278811622 
send @ jquery-3.1.0.js:9471ajax 
@ jquery-3.1.0.js:8999jQuery.(anonymous function) 
@ jquery-3.1.0.js:9148getJSON 
@ jquery-3.1.0.js:9129(anonymous function) 
@ bird.js:5mightThrow @ jquery-3.1.0.js:3508process @ jquery-3.1.0.js:3576

Answer 1

The API you are using is undocumented API, and it does not support JSONP (callback), so you have to make calls in the back-end, you cannot use browser/javascript to make API calls.

If you use documented APIs, they all support JSONP and you can access from front-end code using ajax