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