从 AWS 渲染内容时出现跨域问题答案

【问题标题】：Cross Origin issue while rendering a content from AWS从 AWS 渲染内容时出现跨域问题
【发布时间】：2019-12-16 11:08:09
【问题描述】：

我在 AWS s3 中设置了一个存储桶，其中包含视频文件、大量图像和 js 以及一个包含所有资产的主 index.html 文件。我还启用了 CloudFront，它指向 s3 存储桶。在我的 Rails 应用程序中，我有一个 iframe，我将它指向这样的 cloudfront-signedurl

<iframe src="https://abcde.cloudfront.net/index.html?Expires=1418801390&Signature=Qt0Y0HT5goit&Key-Pair_id=mykeypairid"></iframe>

但它给了我错误未捕获的安全错误：阻止了来源为“https://abcde.cloudfront.net”的框架访问来源为“https://example.mydomain.co”的框架。协议、域和端口必须匹配。请注意，这些是不同的域，如何解决这个跨域问题，以便我可以将来自不同域的内容加载到我的应用程序中？我还在 AWS 上添加了 CORS 配置以允许来自所有来源的内容，但没有运气。

【问题讨论】：

标签： ruby-on-rails amazon-web-services

【解决方案1】：

放弃协议，让浏览器决定。

删除https：

src='//abcde.cloudfront.net.....'

【讨论】：

【解决方案2】：

你还应该在 src 标签之前添加 crossorigin 标签：

<iframe crossorigin="anonymous" src="https://abcde.cloudfront.net/ind...></iframe>

并确保您的 AWS S3 CORS 配置类似于：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

祝你好运！

【讨论】：