Way to debug CORS errors

Question

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.

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)" — RJ Cuthbertson, Aug 11 '15 at 15:05
@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 '16 at 07:53

score 15 · Accepted Answer · answered Nov 18 '13 at 03:10

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.

Interestingly, Firefox doesn't generate an error on that page. — Berin Loritsch, Jul 18 '17 at 19:16

score 10 · Answer 2 · answered Aug 25 '20 at 15:51

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.tech/will-it-cors/

answered Aug 25 '20 at 15:51

Tim Perry

11,766
1
57
85

1

The tool really helped. Thanks to the great developers. – Pankaj Prakash Jun 10 '21 at 06:44

Way to debug CORS errors

2 Answers2

Linked