How to resolve CORS ie same origin policy in angul

问题:

I am developing a mobile application in angularjs where I have to make call to web service. But, when I am making the call with $http.get it is giving the following error.

XMLHttpRequest cannot load http://example.com/First_Step.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access. 

My function for this is as follows:

$scope.firstStepClick = function() {
    appSvc.selectedItem = "firstStep";
    $rootScope.go('parent/firststep', 'slideLeft');
    delete $http.defaults.headers.common['X-Requested-With'];            
    $http.get("http://example.com/First_Step.json").success(function(data) {
        $scope.firstStepData = data;
    }).error(function() {
        alert("an unexpected error occured");
    });
};

So, please help me to solve this CORS problem. I am using html5, css3 and angularjs for this mobile app development.

Thanks in advance

回答1:

You don't have to do anything in the Angular side.

The server side is the one responsible to send the rights headers to enable CORS

Take a look a this:

http://enable-cors.org/server.html

回答2:

apache:

http://enable-cors.org/server_apache.html

nodejs

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type");

apache sling

http://sling.apache.org/apidocs/sling5/org/apache/sling/api/servlets/SlingSafeMethodsServlet.html#doOptions(org.apache.sling.api.SlingHttpServletRequest,org.apache.sling.api.SlingHttpServletResponse) utilise doOptions and return Allow

unfortunatelly I'm not an apache sling expert and that's how much i was able to google, check your network tab, the first call to your server is a 'OPTIONS' call which returns what options are allowed it should return * or specific ones like 'get' or 'post' depending on needs then the reall call will be made