jQuery CORS Content-type OPTIONS

Question

I have issue with sending AJAX body request using jQuery CORS with custom Content-type. Here's my code:

$.ajax({   url: "http://some-other-domain/my-path",   type: "POST",   contentType: "application/json",   dataType: "json",   data: JSON.stringify({     key: 1,     key2: 2   }),   statusCode: {     200: function(data) {     }   },   xhrFields: {     withCredentials: true   },   crossDomain: true }); 

I need to set Content-type as "application/json" as it's require server side. But instead of sending request as POST jQuery sends it's as OPTIONS.

Here's a headers:

Response Headers:

HTTP/1.1 200 OK Server: Apache-Coyote/1.1 Pragma: No-cache Cache-Control: no-cache Expires: Thu, 01 Jan 1970 03:00:00 EET Set-Cookie: JSESSIONID=BB9D6783E58FB0F2ADE1924A2F0CBA52; Path=/ Content-Type: text/html;charset=UTF-8 Content-Length: 6233 Date: Fri, 07 Sep 2012 14:41:13 GMT 

Request Headers:

OPTIONS /my-path HTTP/1.1 Host: MY-HOME-NAME User-Agent: MY_USER_AGEMT Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip, deflate Connection: keep-alive Origin: HERE-GOES-DOMAIN Access-Control-Request-Method: POST Access-Control-Request-Headers: content-type Pragma: no-cache Cache-Control: no-cache 

CORS works great, all required headers are sends by server, but not if it sends by OPTIONS type. Is it jQuery issue?

jQuery - 1.8.1

Answer 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/