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 : ：

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 web methods in the service through my AngularJS frontend. Web方法时，控制台中仍然出现错误。

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 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;

     });


},

Answer 1

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

  eg 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 (eg 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 :)

Answer 2

The preflight (OPTIONS) is occurring due to the fact that you are sending a cross-origin ajax request AND specifying an Authorization header with this GET request.

Also (this is not causing an issue) I would suggest removing the contentType option. This doesn't make sense in the context of a GET request. A GET request should not have any content. All data should be included in the query string or, possibly, headers.

The Authorization header will not be sent with the OPTIONS. You must acknowledge it server-side, and then the browser will send the underlying GET. Read more about CORS at https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS .