31

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.

3
  • 4
    Almost two years later and Firefox still gives a generic "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at {URL}. (Reason: CORS request failed)" Aug 11, 2015 at 15:05
  • @Dyna, Isn't it written at <Ctrl><Shift><I>?
    – Pacerier
    Jan 26, 2016 at 19:51
  • @Pacerier nowadays yes, chrome did a good job displaying the errors at the console. At the time I asked the questions there were only very generic error messages, that did not help at all.
    – Dynalon
    Jan 31, 2016 at 7:53

2 Answers 2

16

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.

1
  • Interestingly, Firefox doesn't generate an error on that page. Jul 18, 2017 at 19:16
10

While browsers still aren't very helpful here, I recently built a webpage that can tell you exactly what's going on, and why, and exactly how to fix it. It's effectively an interactive self-explaining flowchart of the whole CORS system.

If you're stuck trying to debug your CORS setup, try it out: https://httptoolkit.com/will-it-cors/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.