调试 CORS 错误的方法

Posted 2023-03-04

【中文标题】调试 CORS 错误的方法

【英文标题】：Way to debug CORS errors

【发布时间】：2013-11-30 16:09:57

【问题描述】：

在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。

【问题讨论】：

差不多两年后，Firefox 仍然给出一个通用的“跨域请求被阻止：同源策略不允许读取 URL 处的远程资源。（原因：CORS 请求失败）”

@Dyna，不是写在<Ctrl><Shift><I>吗？

@Pacerier 现在是的，chrome 在控制台上显示错误做得很好。在我问问题的时候，只有非常笼统的错误消息，根本没有帮助。

【参考方案1】：

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

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

【讨论】：

这个工具真的很有帮助。感谢伟大的开发者。

【参考方案2】：

您使用的是哪个版本的 Chrome？最新版本在报告 CORS 问题方面变得更好。例如，我使用的是 Chrome 版本“32.0.1700.14 beta”，当我访问this page 时，我的控制台中出现以下错误：

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

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

【讨论】：

有趣的是，Firefox 不会在该页面上生成错误。