Reputation: 41
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
Upvotes: 0
Views: 6503
Reputation: 8465
http://enable-cors.org/server_apache.html
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type");
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
Upvotes: 1
Reputation: 981
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
Upvotes: 5