iframe src 允许所有来源但仍接收跨域错误

Question

我管理 siteA 的前端，并在页面上有一个 iframe，其中 src 指向 siteB 的资源。这意味着是其他供应商和客户使用的可嵌入资源（它是视频嵌入），因此 siteB 的响应标头设置为 Access-Control-Allow-Origin *。并且所有涉及的网址都是https。

我在这里有一个来自开发工具中 src url 的标题截图：

但是，我在尝试查询 iframe 文档以检查是否存在特定元素时仍然收到跨域错误。

我不想修改任何内容，而是想根据内容做出简单的 UI 决策。

我试过了无济于事：

• 标准 jQuery 方法，例如 $('iframe').contents().find()
• $.get 请求检索 html 响应并查看它是否包含特定字符串

我错过了什么吗？克服这一障碍将是我们项目的重大胜利。

Answer 1

您可以应用 Access-Control-Allow-Origin 标头，这将允许您从另一个域读取 ajax 响应，例如：

Access-Control-Allow-Origin: *

但由于Same Origin Policy，此标头不会允许您从另一个域访问呈现的 iframe。但它允许您向 iFrame 的域发出新的 ajax (GET) 请求，然后处理响应。

这个stackoverflow question 探讨了一些可以绕过同源策略的方法，其中一些建议可能会对您有所帮助，但这取决于您要实现的目标。