Cross Origin Resource sharing issue even when all the CORS headers are present

Question

even though i have appended my service response with following provided CORS Headers :

resp.setContentType("application/json");
resp.addHeader("Access-Control-Allow-Origin", "*");
resp.addHeader("Access-Control-Allow-Credentials", "true");
resp.addHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS");
resp.addHeader("Access-Control-Allow-Headers", "Origin,accept,content-type");
resp.flushBuffer();

i am still getting below error in the console while trying to access some of the POST web methods in the service through my AngularJS frontend.

XMLHttpRequest cannot load http://192.***.*.***:8080/abc/def/search/vehicleManufacturer. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.***.*.***:8085' is therefore not allowed access.

However within the same class, some POST methods without any payloads are responding perfectly. Any suggestions ?

EDIT--------->

Below is my AngularJS client screen code for calling the web method:-

getVehicleModel : function(searchData,$scope){
     $http({
         method:'POST',
         url:'http://192.169.*.***:8085/abc/def/search/vehicleModel',
         dataType:'jsonp',
         data:searchData

     }).
     success(function(data){
         console.log("vehicle model")
         $scope.vehicleModel = data.Response;

     });


},

Did your check if the response headers that you're adding in code are actually coming in response for that ajax call in DevTools ? Are you using any framework or just plain servlets ? — Arkantos
No, for the web methods in which m getting error, instead it's coming as OPTIONS as the method annd the response headers are missing in them. — Akash Narayan
Have a look at this stackoverflow.com/questions/21188956/… — Reena

Arkantos Arkantos · Accepted Answer · 2015-04-13T09:27:39

I think the problem here is Preflighted Requests in CORS.

From the Mozilla docs,

Unlike simple requests (discussed above), "preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data. In particular, a request is preflighted if:

It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than

application/x-www-form-urlencoded,

multipart/form-data

text/plain

e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted.

It sets custom headers in the request (e.g. the request uses a header such as X-PINGOTHER)

As explained above, even though you're making a simple POST request, the Content-Type in your request is application/json which is different from the 3 types mentioned above, so it's considered as a Preflight request and an OPTIONS request is fired before your actual POST request.

You can solve this by implementing doOptions in your servlet, just add the headers there and it will work :)

Cross Origin Resource sharing issue even when all the CORS headers are present

2 Answers