调试CORS错误的方法

Question

每隔一段时间我就必须在Web开发期间调试跨源资源共享相关问题.

在我的测试中,Chrome和Firefox在因CORS违规而取消请求时几乎不提供任何信息.通常调试involes根据规范检查所有标头,读取CORS标准等.这是一个非常麻烦的过程.

有没有办法告诉任何浏览器它应该更详细的解释为什么它取消了特定的请求？

例如,我宁愿有更多详细的调试消息,如Request canceled due to missing X-Requested-With field in received Access-Control-Allow-Headers field或Request canceled because supplied Origin: and received Access-Control-Allow-Origin: fields mismatch.

Answer 1

您使用的是哪个版本的Chrome？最新版本在报告CORS问题方面变得更好.例如,我使用的是Chrome版"32.0.1700.14 beta",当我访问此页面时,我在控制台中收到以下错误:

Request header field X-Foo is not allowed by Access-Control-Allow-Headers.

此信息仅可从控制台获得,无法以编程方式访问.希望更多的浏览器也会效仿.请注意,如果您的请求因某些其他非CORS原因而失败,您可能仍会看到无用的错误消息.

Answer 2

虽然浏览器在这里仍然不是很有帮助，但我最近建立了一个网页，可以告诉你到底发生了什么，为什么，以及如何修复它。它实际上是整个 CORS 系统的交互式自解释流程图。

如果您在调试 CORS 设置时遇到困难，请尝试一下：https : //httptoolkit.tech/will-it-cors/