AngularJS XMLHttpRequest cannot load X. No 'Access-Control-Allow-Origin' header present

Question

I've just seen the entire internet, and I can't seem to find a solution to my problem. I'm working on my new portfolio website, which can be found on http://geertvandelangenberg.nl/angular .

I'm currently fetching my content through a Wordpress API, and I'm parsing with AngularJS' $http.

Everything works good on pretty much all places I check, except for when I check the website at my parents' place. I get the following error:

http://i.stack.imgur.com/rlFRW.png

I'm not sure whether the error will appear with some of you guys.

My code looks like this:

var myApp = angular.module('myApp',['ngSanitize']);

myApp.controller('PostsCtrlAjax', ['$scope', '$http', function($scope,$http) {
$scope.loading = true;
$scope.data = "unknown";
$http({method:'GET', url: 'DOMAIN/wp/wp-json.php/pages/', headers: {}})
.success(function(data) {
    $scope.posts = data;
    $scope.loading = false;
});
}]);

myApp.config(['$httpProvider', function($httpProvider) {
   $httpProvider.defaults.useXDomain = true;
}]);

I've tried pretty much everything there is on Stackoverflow, but the error still remains.

I hope you guys can give me some tips!

Thanks!

Answer 1

Your backend need to implement CORS or backend operations must live on the same domain.