28

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

15

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/

1
  • 1
    The tool really helped. Thanks to the great developers. Jun 10, 2021 at 6:44

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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

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