Question

我在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>

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

Answer 1

删除协议，让浏览器决定。

删除https：

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

Answer 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>

祝你好运！

从AWS渲染内容时的跨源问题

2 个答案: