从 iframe 渲染图像时存在 CORS 问题

Question

基本上事情是这样的：我有一个前端，我通过 iframe 渲染另一个前端，在这个 iframe 中，我向存储桶发出请求以获取图像并将它们显示在我的 iframe 中（因此，在我的前端中）但通过 iframe）。问题是我遇到了 CORS 错误，并且我不知道如何解决它，因为我的存储桶允许来自两个前端的请求。

这是错误：

从源“https://frontend.com”访问“https://storage.googleapis.com/bucket/videos/video.m3u8”处的 XMLHttpRequest 已被 CORS 策略阻止：“Access-Control-Allow-” Origin' 标头的值 'https://iframe.com' 不等于提供的 origin

我读到这可能与

<iframe>s

之间的沟通有关？我不太确定，因为我不知道 iframe 之间应该有什么交互，因为我只在 iframe 中渲染视频，而不是在前端渲染。在我的前端，“我粘贴”我的 iframe，然后我就看到了视频

Answer 1

正如 @jub0bs 告诉我的，我阅读了有关同源策略和 CORS 的文档，确实它们是不同的起源。在同一页面上，有一个示例说明何时会给出错误，何时不会给出错误。

网址	结果	原因
http://store.company.com/dir2/other.html	同源	只是路径不同
http://store.company.com/dir/inner/another.html	同源	只是路径不同
https://store.company.com/page.html	失败	不同协议
http://store.company.com:81/dir/page.html	失败	端口不同（http://默认是80端口）
http://news.company.com/dir/page.html	失败	不同的主机