CODEWITHSUNDEEP
angularjscors
Vishal Kaul
Vishal Kaul

Reputation: 133

Access Control Allow Origin | AngularJS

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 ?

Upvotes: 0

Views: 508

Answers (2)

Dimos
Dimos

Reputation: 8898

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.

Upvotes: 1

kittenchief
kittenchief

Reputation: 1255

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.

Upvotes: 0

Related Questions