Menu
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.
253
How can I fix my CORS error? To know exactly why your request is failing, you need to inspect the traffic itself, find where you're breaking the rules above, and then either: Change the request to make it a simple request. Change the server's response to follow the rules above.
Use this page to test CORS requests. You can either send the CORS request to a remote server (to test if CORS is supported), or send the CORS request to a test server (to explore certain features of CORS). Send feedback or browse the source here: https://github.com/monsur/test-cors.org.
Try to add a callback parameter in the request. Maybe the page was prepared to send the data as JSONP. In that case the page will send back the data with Content-Type: application/javascript which will bypass the CORS policy.
Solving CORS error the right way For example, if you want to solve this on the express. js then all you have to do is use a certain middleware that will handle the origin key. But, for any non-standard HTTP request like PUT, PATCH, DELETE, you'll have to preflight them.
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.
54
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/
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
