CORS Error Debugging Method

Question

From time to time, I have to debug cross-resource sharing issues during web development.

For my testing, Chrome and Firefox provide almost no information when they cancel the request due to a CORS violation. Typically, debugging involves checking all headers for specifications, reading the CORS standard, etc. This is a really cumbersome process.

Is there no way to tell the browser that it should be more detailed about why it canceled a particular request?

For example, I have more detailed 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 .

Answer 1

What version of Chrome are you using? Recent versions have become much better at reporting CORS issues. For example, I use the version of Chrome "32.0.1700.14 beta", and when I am in 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 available only from the console and cannot be programmed programmatically. Hopefully more browsers follow suit. Please note that if your request is not executed for any other reason than CORS, you can still see useless error messages.