Problem with 'Access-Control-Allow-Origin' in AngularJS

1

Follow the code

  angular.module('App', [])
    .controller('InstaController',function($scope, $http){
        $scope.busca;
        $scope.buscar = function(){
            $scope.getInsta($scope.busca);
        }


        $scope.getInsta = function(tag){
            var url = 'https://api.instagram.com/v1/media/popular?client_id=6f6a0f971acf482a8dc4f9e66c2ec8b9';
            if(tag !== undefined){
                url = "https://api.instagram.com/v1/tags/"+tag+"/media/recent?client_id=6f6a0f971acf482a8dc4f9e66c2ec8b9"
            }
            $http.get(url)
            .success(function(data){
                $scope.inst = data.data;
                console.log($scope.inst);

            });
        }
        $scope.getInsta();
    });

Follow the error XMLHttpRequest can not load link . In 'Access-Control-Allow-Origin' header is present on the requested resource.

Note: I am using Compiling in Build .Apk It works normal but in Browser.

App link on the web allandasilva.com.br/App /

"I solved" with a Chrome plugin

link

How to Solve Without Using Outsourcing

    
asked by anonymous 14.11.2014 / 17:03

1 answer

1

You do not have "allow" in the response header of api.instagram. The only way is to use GET + JSONP. Take a look at link in the JSONP session.

A CALLBACK is required at the endpoint for JSONP. (& callback = callbackFunction)

Example:

https://api.instagram.com/v1/tags/coffee/media/recent?access_token=fb2e77d.47a0479900504cb3ab4a1f626d174d2d&callback=callbackFunction

Callback function:

callbackFunction({
    ...
});
    
15.11.2014 / 21:50