Search code examples
debugginggoogle-chromefirefoxcors

Way to debug CORS errors


Every once in a while I have to debug cross-origin resource sharing related problems during web-development.

To my testing, Chrome and Firefox give virtually no information when they cancel a request due to a CORS violation. Usually debugging involes checking the all the headers against specs, reading the CORS standard etc. It is a really cumbersome process.

Isn't there a way to tell any Browser that it should be more verbose about why it canceled a specific request?

For example, I rather have more verbose debug messages like Request canceled due to missing X-Requested-With field in received Access-Control-Allow-Headers field or Request canceled because supplied Origin: and received Access-Control-Allow-Origin: fields mismatch.


Solution

  • Which version of Chrome are you using? The latest versions have become much better at reporting CORS issues. For example, I am using Chrome version "32.0.1700.14 beta", and when I visit this page, I get the following error in my console:

    Request header field X-Foo is not allowed by Access-Control-Allow-Headers.
    

    This information is only available from the console, and cannot be programmatically accessed. Hopefully more browsers will follow suit. Note that if your request fails for some other, non-CORS reason, you may still see unhelpful error messages.