jQuery CORS Content-type OPTIONS

Solution 1:

This OPTIONS request is the CORS preflight request. It is a request that is sent to the server before the actual request in order to ask permissions to make the request. The custom Content-Type is in fact triggering the preflight. According to the CORS spec (http://www.w3.org/TR/cors/), any Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain triggers the preflight.

If you have no control over the remote server, then you'll need to either ask them to support CORS preflight, or try some other option such as JSON-P.

If you do have control over the remote server, you can change it to handle preflights. In order to handle a preflight request, you should send the following headers in the response to the OPTIONS request:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type

The response should be an HTTP 200. The Access-Control-Allow-Methods response header can either echo the value of the Access-Control-Request-Method, or it can just be GET, POST, PUT, DELETE to support all methods. The Access-Control-Allow-Headers response header should echo the values in the Access-Control-Request-Headers request header.

Once the browser receives those headers, it will make the actual request. You can learn more about CORS preflight requests here:

http://www.html5rocks.com/en/tutorials/cors/