Preflight response has an invalid HTTP 400 status code

Question

I am trying to make a REST call (POST) using AJAX. This is my AJAX code

<script> var settings = { "async": true, "crossDomain": true, "dataType": "json", "url": "http://localhost:port/service/myservice", "method": "POST", "data": '{jsondata}', "headers": { "accept": "application/json", "Authorization": "authValue" } } $.ajax(settings) .done(function (response) { console.log(response); }); </script> 

I originally got this error: XMLHttpRequest cannot load http: // localhost: port / service / myservice . The response to the request before the flight does not pass the access control check. There is no "Access-Control-Allow-Origin" header on the requested resource. Therefore, the original 'null' is not allowed. The response was an HTTP 400 status code.

To solve this problem, I added the following code to my dropwizard application

 Dynamic filter = env.servlets().addFilter("CORS", CrossOriginFilter.class); filter.setInitParameter(CrossOriginFilter.ALLOWED_METHODS_PARAM, "GET,PUT,POST,DELETE,OPTIONS"); filter.setInitParameter(CrossOriginFilter.ALLOWED_ORIGINS_PARAM, "*"); filter.setInitParameter(CrossOriginFilter.ACCESS_CONTROL_ALLOW_ORIGIN_HEADER, "*"); filter.setInitParameter("allowedHeaders", "Content-Type,Authorization,X-Requested-With,Content-Length,Accept,Origin"); filter.setInitParameter("allowCredentials", "true"); filter.addMappingForUrlPatterns(EnumSet.allOf(DispatcherType.class), true, "/*"); 

After adding this, my original exception went away, but I get the following exception: XMLHttpRequest cannot load http: // localhost: port / service / myservice . Preflight response has an invalid HTTP 400 status code

Is this a problem with CORS? What am I doing wrong here?

UPDATE

After doing additional debugging, I found this behavior. When sending a request without an authorization header, I get 415 (Unsupported media type) .

I think something is wrong with my AJAX code, can someone please help me find the problem? Thanks.

Answer 1

You can try here , mentioned as the complete answer in this thread.

 $.ajax({ type:"POST", beforeSend: function (request) { request.setRequestHeader("Authority", authValue); }, url: "http://localhost:port/service/myservice", data: "json=" + escape(JSON.stringify(createRequestObject)), processData: false, success: function(msg) { $("#results").append("The result =" + StringifyPretty(msg)); } }); 

Answer 2

try adding the following settings to your settings?

 xhrFields: { withCredentials: true } 

Answer 3

if you need to pass JSON data in an AJAX call, you need to specify the content type as json / application, so the server knows that you are trying to send JSON data. But this will change the default content type for the call, and the call will be entitled to pre-flight verification, which requires the correct client request and server request.

For convenience, do not use JSON.stringify () when transferring data, just create a simple string with the format {key: value, key: value, ...} and pass the string as data. An Ajax call serializes the default data and does the right thing, and the call remains as one POST call to the server, where there are two calls as a pre-flight mode.