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

Question

I am trying to use Cross-Origin resource sharing with Access-Control-Allow-Origin and related headers. I have work on Firefox, but Chrome gives me permission errors that look like this:

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

The network inspector shows the request, but does not respond (and does not include the OPTIONS pre-check request and response). I checked the query output with curl and reproduced all the headers, and what I see matches what the spec implies (and, again, what Firefox accepts). I don’t understand how to debug this further - are there any tricks to view network activity at a lower level than Chrome usually provides? Information on how Chrome interprets CORS requests differently than Firefox?

Answer 1

I suspect what you see is a pre-flight and then failed Chrome request due to an error. This explains why everything works in Firefox, but not in Chrome.

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

Also, do you note that the network inspector does not include the OPTIONS preposition? Which network inspector are you using? I would recommend using Wireshark, as this gives you detailed information about the actual network traffic that the Chrome inspector does not provide (for example, Wireshark will log pre-flight requests).

Some other debugging tips:

Try the query in Safari. This will help reduce it to a Chrome error or a WebKit error.

The time I saw you see (Wireshark shows the request, but not the answer), because my server does not include the Access-Control-Allow-Origin header, which is not enabled, because Chrome does not send the Origin header (see above). In your network path, do you see the Origin header in the request? Do you have control over the server, and if so, does it get the Origin header?

It is difficult to debug an actual problem without any details. If you still have problems, can you post request / response headers here?