通过 iframe 从 S3 存储桶嵌入 HTML 页面无法加载资源和媒体文件

Question

我们有一个 s3 存储桶，其中有多个包含不同小项目的文件夹，这些项目包含基本的 static 网页和index.html入口点。 计划是通过 iframe 将这些 static 页面集成到 react-app 中。当我们使用示例页面执行此操作时，HTML 文档的嵌入有效但没有加载任何资源（图像文件 + 样式表），抛出以下内容错误：

DOMException: Blocked a frame with origin "BUCKET-DOMAIN" from accessing a cross-origin frame.

在查找该错误时，我通常会发现人们试图使用postMessage API 来控制在 iframe 中呈现的文档的某些部分。然而，在我的例子中，我只想确保 iframe 嵌入了网站，因为它在公开可用的网站上显示链接所有资源。

我试过让 S3 存储桶专门为一个 static 网站提供服务，认为这可能会影响嵌入的工作方式。 然而，它仍然是同样的问题。 很确定对此有一个非常简单的解决方案和我忽略的东西。 一种可能的选择是在我们的站点上为 S3 存储桶提供一个子域，但我不知道这在本地开发中如何工作。

Answer 1

如果您的存储桶是公开的，那么您可以使用您的 cdn 链接访问。 否则，您将使用 aws sdk 对其进行配置。我认为此链接会对您有所帮助

通过 web 浏览器访问存储在 Amazon S3 上的文件