使用 Chrome/WebKit 调试 Access-Control-Allow-Origin

Posted 2023-03-04

【中文标题】使用 Chrome/WebKit 调试 Access-Control-Allow-Origin

【英文标题】：Debugging Access-Control-Allow-Origin with Chrome/WebKit

【发布时间】：2011-06-12 20:14:15

【问题描述】：

我正在尝试将 Cross-Origin Resource Sharing 与 Access-Control-Allow-Origin 和相关标头一起使用。我让它在 Firefox 上运行，但 Chrome 给了我权限错误，看起来像这样：

XMLHttpRequest cannot load <remote>. Origin <local> is not allowed by Access-Control-Allow-Origin.

网络检查器显示请求但没有响应（并且不包括 OPTIONS 预检请求和响应）。我使用 curl 检查了请求输出并再现了所有标头，我看到的符合规范所暗示的内容（同样，Firefox 接受的内容）。我不知道如何进一步调试 - 是否有技巧可以在比 Chrome 通常提供的更低级别查看网络活动？有关 Chrome 如何以不同于 Firefox 的方式解释 CORS 请求的信息？

【参考方案1】：

我怀疑您看到的是由于错误而导致 Chrome 请求失败的预检。这可以解释为什么事情在 Firefox 中有效，但在 Chrome 中无效。

您是否在请求中发送任何自定义标头？ WebKit 中有一个错误，其中带有自定义标头的 GET 请求失败（此处的错误：http://code.google.com/p/chromium/issues/detail?id=57836）。我还注意到，Chrome 有时需要 Access-Control-Allow-Headers 列表中的 Content-Type 标头，即使 Content-Type 是一个简单的标头。

另外，您提到网络检查器不包括 OPTIONS 预检？您使用的是哪个网络检查器？我建议使用 Wireshark，因为它可以为您提供有关 Chrome 的检查器未提供的实际网络流量的详细信息（例如，Wireshark 将记录预检请求）。

其他一些调试技巧：

在 Safari 中尝试请求。这将有助于将其缩小到 Chrome 错误或 WebKit 错误。

我看到您看到的错误的次数（Wireshark 显示请求但没有响应），这是因为我的服务器不包含 Access-Control-Allow-Origin 标头，因为Chrome 没有发送 Origin 标头（请参阅上面的错误）。在您的网络跟踪中，您是否在请求中看到 Origin 标头？您是否可以控制服务器，如果可以，它是否会收到 Origin 标头？

如果没有更多细节，很难调试实际问题。如果您仍然有问题，您可以在此处发布请求/响应标头吗？

【讨论】：

感谢您的建议。最终问题出在 SSL 证书上——它是自签名的，我没有在那个配置文件上接受它。直接访问资源（不是通过 XHR）后，我得到了证书对话框，然后后来的 XHR 请求工作了。

content-type 仅当其值为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 时，才只是一个简单的标头。见w3.org/TR/cors/#simple-header。