No 'Access-Control-Allow-Origin' header is present on the requested resource - error

Question

I'm trying to get a JSON file from instagram, and I got an error when I make an $http.get :

insta.ctrl :

insta.controler 'instaCtrl' ($scope, $http), ->
   $http.get('http://api.instagram.com/publicapi/oembed/?url=http://instagr.am/p/fA9uwTtkSN/')
       .success(data), ->
           #done !
       .error(e), ->
           #nah ! 

my apache2's conf

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

Error message on chrome :

XMLHttpRequest cannot load #url_of_intagram_api_here. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.

It work when I disable the internet security in chrome. Any ideas?

Answer 1

Apparently Instagram API doesn't implement CORS. However they provide JSONP interface for data retrieving. So what you can do is to use jsonp method:

$http.jsonp('http://api.instagram.com/publicapi/oembed/?url=http://instagr.am/p/fA9uwTtkSN/&callback=JSON_CALLBACK').success(function(data) {
    $scope.data = data;
});

Note callback=JSON_CALLBACK GET parameter you need to send.

Demo: http://plnkr.co/edit/OG1sT7A9OM1hWBqCvSmC?p=preview