Having a controller with a service that retrieves JSON from another server, I encountered the following issue:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http:somesite.com. This can be fixed by moving the resource to the same domain or enabling CORS.I've seen similar issues resolved by adding
"Access-Control-Allow-Origin": "*"Here is the code for my controller:
var myApp = angular.module('cplanner',[]);
myApp.controller('GetItemCtrl', ['$scope', '$http', function($scope, $http) {
var itemUrl = 'http:somesite.com';
$http({url: itemUrl,
dataType: 'json',
method: 'POST',
dataType : 'json',
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "POST, GET, OPTIONS, PATCH, DELETE",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"
},
xhrFields: {
withCredentials: true
}}).success(function(data, status, headers, config) {
if(data.status == "ok"){
console.log(data.data);
$scope.items = data.data;
}
}).error(function(data, status, headers, config) {
});
}]);
Despite adding the necessary headers, the cross-origin issue persists. Any guidance or suggestions on how to successfully retrieve responses from an external server would be greatly appreciated. Thank you.