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

Question

Follows 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 cannot load https://api.instagram.com/v1/media/popular?client_id=6f6a0f971acf482a8dc4f9e66c2ec8b9. No 'Access-Control-Allow-Origin' header is present on the requested Resource.

Note: I’m Using Build Building . Apk Works normal but in Browser.

app link on Web allandasilva.com.br/App/

"resolvi" with a Chrome plugin

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

How to Resolve without using externation

Answer 1

You do not have "allow" in the Response header of the.instagram.api. The only way is by using GET + JSONP. Take a look at http://instagram.com/developer/endpoints/ in the JSONP session.

A CALLBACK is required in 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({
    ...
});