XMLHttpRequest cannot load http No Access-Control-Allow-Origin header angularjs

Question

I am getting this error. XMLHttpRequest cannot load http://communityempowerment.org.pk/test-sample/api/get_category_index/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

my code is

.controller('MenuCtrl', function($http, $scope){

    $scope.categories = [];

    $http.get("http://communityempowerment.org.pk/test-sample/api/get_category_index/").then
        (function(data){
            $scope.categories = data.data;
            console.log(data);
        }, function(err){
            console.log(err);
    })

})

You can't do ajax requests to random cross-origin resources, it violates the same-origin policy. The only workaround is to control the server and add the correct headers, return JSONP, or use your own server to make the request. — adeneo

Josh Beam Josh Beam · Accepted Answer · 2016-03-05T05:35:22

The server that is serving http://communityempowerment.org.pk/test-sample/api/get_category_index/ doesn't allow cross-origin requests. Take a look at CORS on MDN. If you control the server, you can change the header Access-Control-Allow-Origin to either a specific set of domains, or a wildcard * to allow access from all origins.

XMLHttpRequest cannot load http No Access-Control-Allow-Origin header angularjs

2 Answers