Jquery Ajax always throws error using CORS

Question

Just to clarify as I cannot fit enough info in the heading...

I am doing a cross site request and adhering to CORS, and that all works. The browser sends an options request, my service responds with a sprinkling of acceptance headers, then the browser accepts the 200 response and sends the post. Feel free to skip the header outputs if you dont need any info from them:

Initial Options Request:

OPTIONS http://localhost:1837/authentication HTTP/1.1
Host: localhost:1837
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0) Gecko/20100101 Firefox/5.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-gb,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:6879
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with
Pragma: no-cache
Cache-Control: no-cache

Options Response:

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Thu, 30 Jun 2011 09:50:43 GMT
X-AspNet-Version: 4.0.30319
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: CONTENT-TYPE, x-requested-with
Access-Control-Allow-Origin: http://localhost:6879
X-AspNetMvc-Version: 3.0
Cache-Control: private
Content-Length: 0
Connection: Close

Post request:

POST http://localhost:1837/authentication HTTP/1.1
Host: localhost:1837
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0) Gecko/20100101 Firefox/5.0
Accept: */*
Accept-Language: en-gb,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
X-Requested-With: XMLHttpRequest
Referer: http://localhost:6879/login
Content-Length: 27
Origin: http://localhost:6879
Pragma: no-cache
Cache-Control: no-cache

username=test&password=test

Post response:

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Thu, 30 Jun 2011 09:50:43 GMT
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 3.0
Set-Cookie: .ASPXAUTH=A22B60AC3F317F90A263217B50548A1D43871D43BD84A160C2AC4DCCF4EF33F2E044A9FCEC64AFCF0539652684BF5D1B648F12F92E0788096A9F5BE7036E386D8EE262A6FA6A922446F3C114E6FC1AFB990AADB901B778C7735B4B1EBD6F967EA7B27E5780AFA0037A9BF59B5CBBD78A60DC8E9FDE3D0A0BBB6DEE31B38D62944247F19BF8052B3DCFB6B6AC6DEC886EC5B8FBE23ABBB7485E1767FCCF1DDEF8CC99253F1068C33946A625CD6462EF80B4515B5CDE54E26571C3EB38ACB7DD6B0EDDC9AAD58DA878CB1BC1E5242E8FD2C62FD9FE1DCEE527700E1B68B8BC4BC3DBF5775B3ADD46C728841312DAE1F864E05D61B0375F99AF307831EB210BDA995369FBE2CEC16F5F97EAA3BB1E08E0A2D8DE22EB6DF69F5732946A449D76080297E2CBB0953F941F10778605FBFB9A8B; domain=localhost; expires=Thu, 30-Jun-2011 10:20:43 GMT; path=/
Cache-Control: private
Content-Length: 0
Connection: Close

Once thats all done my jquery error callback is called with the statusText "error" and the xhr contains:

readyState  0
responseText    ""
status  0
statusText  "error"

I am a bit baffled as the response seems valid, and the xhr doesn't even contain any status code. I have tried looking in the jquery complete callback and same details in there. Anyone seen anything like this before? Oh and I am using Firefox but have tested in Chrome too and same issue :(

Answer 1

Your post response still needs the Access-Control-Allow-Origin header (it is required for all CORS responses, since HTTP is stateless).

Also regarding error reporting, I've found that browser responses to CORS errors aren't very helpful. Hopefully this will be fixed in the future.