Access Control Allow Origin | AngularJS

Question

I was integrating the flickr app into my app. I am receiving the error below:

XMLHttpRequest cannot load https://api/flickr.com/services/rest?api_key=4cd95b5ad05844319ee958bf96ec0150&format=json&method=flickr.photos.search&nojsoncallback=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sinch12j12.ads.autodesk.com' is therefore not allowed access. The response had HTTP status code 400.

Below is the client side code:

(function() {
'use strict';
angular.module('flickrApp', ['ngMaterial'])
    .config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }])
    .controller('ListController', ['$scope', '$http', function($scope, $http) {
        $scope.results = [];

        $scope.search = function() {
            $http({
                method: 'GET',
                url: 'https://api/flickr.com/services/rest',
                params: {
                    method: 'flickr.photos.search',
                    api_key: '4cd95b5ad05844319ee958bf96ec0150',
                    text: $scope.searchTerm,
                    format: 'json',
                    nojsoncallback: 1
                }
            }).success(function(data) {
                $scope.results = data;
            }).error(function(error) {
                console.log(error);
            });
        }

    }]);
})();

Please let me know how shall it may be resolved ?

Dimos · Accepted Answer · 2015-05-29 06:51:24Z

1

You are trying to make AJAX requests to a different server (domain), that does not allow ajax requests from other domains. There are 2 solutions to your problem :

Edit the configurations of the remote server (Allow-Origin header) to allow AJAX requests from other servers. I think this solutions is not feasible in your case, as you are not capable of configuring the flickr server
Create a proxy server component in your server, exposing an API to your application. Thus, you will make the AJAX requests to your API (and since it is the same domain, you will not have a cross-domain request issue), and your server will make the requests to the flickr API and respond in your AJAX call.

answered May 29, 2015 at 6:51

Dimos

9,0381 gold badge41 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kittenchief · Accepted Answer · 2015-05-29 06:44:18Z

0

You're trying to use AJAX to retrieve some data from a remote server (in this case, the Flickr server). For security reasons, AJAX calls to any file on a remote server is not permitted unless that file has allowed AJAX calls from remote servers. Here, the Flickr file your trying to get doesn't allow AJAX calls from any other servers, that's why you won't be able to access the data in that file.

Thanks and let me know if you have any more problems.

answered May 29, 2015 at 6:44

kittenchief

1,26517 silver badges24 bronze badges

Collectives™ on Stack Overflow

Access Control Allow Origin | AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related