Debugging Access-Control-Allow-Origin with Chrome/WebKit

Question

I'm trying to use Cross-Origin Resource Sharing with Access-Control-Allow-Origin and related headers. I have it working on Firefox, but Chrome is giving me permission errors, that look this like:

XMLHttpRequest cannot load <remote>. Origin <local> is not allowed by Access-Control-Allow-Origin.

The network inspector shows the request but no response (and doesn't include the OPTIONS preflight request and response). I inspected the request output using curl and reproducing all the headers, and what I see fits what the specification implies (and again, what Firefox accepts). I'm at a loss how to debug this further -- are there tricks for seeing the network activity at a lower level than what Chrome normally provides? Information about how Chrome interprets CORS requests differently than Firefox?

Answer 1

I suspect what you're seeing is a preflight followed by a failing Chrome request due to a bug. That would explain why things work in Firefox but not in Chrome.

Are you sending any custom headers in your request? There's a bug in WebKit where GET requests with custom headers fails (bug here: http://code.google.com/p/chromium/issues/detail?id=57836). I've also noticed that Chrome sometimes expects the Content-Type header in the Access-Control-Allow-Headers list, even though Content-Type is a simple header.

Also, you mention that the network inspector doesn't include the OPTIONS preflight? Which network inspector are you using? I'd recommend using Wireshark, since this gives you details on the actual network traffic that Chrome's inspector doesn't provide (for example, Wireshark will log preflight requests).

Some other debugging tips:

Try the request out in Safari. This will help narrow it down to a Chrome bug or a WebKit bug.

The times I've seen the error you are seeing (Wireshark shows a request but not a response), it is because my server doesn't include the Access-Control-Allow-Origin header, which isn't included because Chrome isn't sending the Origin header (see bug above). In your network trace, do you see an Origin header in the request? Do you have control over the server, and if so, does it receive an Origin header?

Its tough to debug the actual issue without more details. If you are still having issues, can you post request/response headers here?