访问控制允许起源之谜

Question

I'm having trouble making a CORS request in Chrome (Version 32.0.1700.77). I'm positive that the correct preflight headers are being sent and that they're also being sent during the primary request. I should add that I'm using jQuery $.ajax with the contentType parameter set to "application/json". The existence of the contentType argument seems to be triggering the problem (since things work fine without it).

Here's the output from the OPTIONS request.

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Authorization, Content-Type, X-Requested-With
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Content-Type: text/plain
Content-Length: 2
Date: Fri, 17 Jan 2014 04:58:43 GMT
Connection: keep-alive

And here's the output from the primary POST request (401 is expected):

HTTP/1.1 401 Unauthorized
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Authorization, Content-Type, X-Requested-With
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Content-Type: application/json; charset=utf-8
Content-Length: 36
Date: Fri, 17 Jan 2014 05:00:05 GMT
Connection: keep-alive

The problem is that Chrome doesn't recognize the Access-Control-Allow-Origin response header for some reason and displays the below line in the error console:

XMLHttpRequest cannot load http://site1.dev:3000/api/v1/pathways . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://site2.dev:8000 ' is therefore not allowed access.

Any ideas?

Answer 1

Turns out Chrome wasn't reporting a 500 error from the API server. Doh!