Unable to make PUT/POST/DELETE HTTP Call using CORS in JQuery 1.6.4

Question

So, I can successfully make a GET call to my service using CORS. However, something must be going wrong at the preflight level for the POST, PUT, and DELETE operations. However, from what I can tell, the header responses my server is returning in response to the OPTIONS query are correct and match those described in

Here is my javascript code, using $.ajax in JQuery 1.6.4.

$.ajax({
  url: 'http://myhome:8080/TaskApproval/resources/tasks/2',
  context: this,
  data: '<?xml version="1.0" encoding="UTF-8"?> <task> <description>Get carrots from the grocery store</description><originator>Chris</originator><subject>Get Carrots !!</subject><taskId>2</taskId> </task> ',
  timeout: 30000,
  type: 'PUT',
  contentType: 'application/xml',
  success: function(response) {
    alert(response);
    result = response;
  },
  error: function(xhr) {
    alert('Error!  Status = ' + xhr.status + " Message = " + xhr.statusText);
  }
});

Now, this is what my HTTP Trail looks like, courtesy of Firebug.

Request:

OPTIONS /TaskApproval/resources/tasks/2 HTTP/1.1
Host: widgethome:8080
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
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
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://localhost:8080
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: content-type

Response:

HTTP/1.1 200 OK
X-Powered-By: Servlet/3.0
Server: GlassFish v3
Allow: OPTIONS,GET,DELETE,HEAD,PUT, POST
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: *
Content-Type: application/xml
Content-Length: 2792
Date: Wed, 28 Sep 2011 18:21:11 GMT

There is then no PUT (or POST or DELETE), I just get that annoying non-helpful xhr object that looks like this:

readyState  0 
responseText    ""
status  0
statusText  "error"

I'm very mystified that if I then remove the contentType in my Ajax call, and it sends an invalid content type per my application, the browser actually sends my PUT request, which fails because the Content-Type is not application/xml. See below:

$.ajax({
  url: 'http://myhome:8080/TaskApproval/resources/tasks/2',
  data: '<?xml version="1.0" encoding="UTF-8"?> <task> <description>Get carrots from the grocery store</description><originator>Chris</originator><subject>Get Carrots !!</subject><taskId>2</taskId> </task> ',
  timeout: 30000,
  type: 'PUT',
  //contentType: 'application/xml',
  success: function(response) {
    alert(response);
    result = response;
  },
  error: function(xhr) {
    alert('Error!  Status = ' + xhr.status + " Message = " + xhr.statusText);
  }
});

Leads to this HTTP Trail, again courtesy of Firebug:

Options Request:

OPTIONS /TaskApproval/resources/tasks/2 HTTP/1.1
Host: myhome:8080
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
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
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://localhost:8080
Access-Control-Request-Method: PUT

Options Response:

HTTP/1.1 200 OK
X-Powered-By: Servlet/3.0
Server: GlassFish v3
Allow: OPTIONS,GET,DELETE,HEAD,PUT, POST
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: *
Content-Type: application/xml
Content-Length: 2792
Date: Wed, 28 Sep 2011 18:26:23 GMT

Put Request:

PUT /TaskApproval/resources/tasks/2 HTTP/1.1
Host: myhome:8080
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://localhost:8080/TaskApproval/crossdomain.html
Content-Length: 197
Origin: http://localhost:8080

Put Response:

HTTP/1.1 415 Unsupported Media Type
X-Powered-By: Servlet/3.0
Server: GlassFish v3
Content-Type: text/html
Content-Length: 1069
Date: Wed, 28 Sep 2011 18:26:23 GMT

The 415 makes sense because I don't support content application/x-www-form-urlencoded, only application/xml. What I don't understand is why does setting the Content-Type correctly prevent the PUT?

Thanks for any insight! I've been searching the internet for quite some time, and can't find a solution for this problem.

Answer 1

You need to include CORS headers in both the preflight and the actual response. So try including the following headers in the PUT response from your server:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

One other thing to note is that the CORS spec does not list '*' as a valid value for Access-Control-Allow-Headers:

http://www.w3.org/TR/cors/#access-control-allow-headers-response-he

Instead, you should try explicitly listing all the request headers like so:

Access-Control-Allow-Headers: Content-Type

You must include Content-Type because the Content-Type is not considered a simple header when its value is not application/x-www-form-urlencoded, multipart/form-data, or text/plain (See the CORS spec for more details on simple headers).

Answer 2

Don't forget to make sure your prefight Options request also responded with:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Content-Type