绕过 Amazon Aws 上的跨域资源共享

Posted 2023-03-04

【中文标题】绕过 Amazon Aws 上的跨域资源共享

【英文标题】：get around cross-origin resource sharing on Amazon Aws

【发布时间】：2016-11-06 07:52:36

【问题描述】：

我正在使用 krpano html5 播放器创建一个虚拟现实 360 度视频网站。

在 safari 上进行测试之前，这一切都很好，我意识到它不起作用。原因是 safari 不支持通过 WebGL 的视频的 CORS（跨域资源共享）。

澄清一下，如果我的视频与我的应用程序文件在同一台服务器上，它可以工作，但因为我的文件托管在 Amazon s3 上，所以它们是 CORS。现在我不确定该怎么做，因为我已经在连接到我的 amazon s3 存储桶的数字海洋上构建了我的应用程序，但是我不能仅仅为了获得我需要的存储空间而增加我的 droplet（大约 100GB 开始并且会增加将来到 Terrabytes，我的视频收藏会变得更大）。

那么有谁知道我可以解决这个问题的方法，以使视频看起来不是来自不同的来源，或者我可以做些什么来克服这个障碍？

有什么方法可以设置亚马逊 s3 和亚马逊 EC2，这样它们就不会将彼此视为跨域资源共享？

编辑：

我这样加载我的视频：

<script>

function showVideo()
    embedpano(

        swf:"/krpano/krpano.swf",

        xml:"/krpano/videopano.xml",

        target:"pano",

        html5:"only",

    );



</script>

然后调用我的 xml 文件，该文件调用视频文件：

<krpano>
    <!-- add the video sources and play the video -->
    <action name="add_video_sources">
        videointerface_addsource(‘medium', 'https://s3-eu-west-1.amazonaws.com/myamazonbucket/Shoots/2016/06/the-first-video/videos/high.mp4|https://s3-eu-west-1.amazonaws.com/myama…ideos/high.webm');
        videointerface_play(‘medium');
    </action>
</krpano>

我不知道 krpano 核心是如何工作的，我认为 javascript 从 XML 文件中获取 URL，然后请求将它们拉入。

【问题讨论】：

您能否提供更多有关您如何加载视频的信息？使用 S3/Cloudfront 是一种很常见的资产分配方式，CORS 通常不是问题。

@datasage 我更新了我的问题

我认为这与脚本如何加载文件有关。如果文件像 ajax 请求一样加载，那么 CORS 将发挥作用。

【参考方案1】：

@datasage 在 cmets 中提到 CloudFront 是一种常见的解决方案。我不知道这是否是他的想法，但它肯定会奏效。

我described using this solution to solve a different problem, in detail, on Server Fault。在这种情况下，问题是如何将主站点和来自不同服务器的“/blog/*”整合到一个域名下，从而形成一个统一的网站。

这与您需要的完全一样，但原因不同。

创建 CloudFront 分配，将备用域名设置为您的站点名称。

创建两个（或更多）指向您的动态和静态内容源服务器的源服务器。

使用其中一个作为默认值，最初处理所有可能的路径模式（*，默认缓存行为），然后开辟出适当的路径以指向另一个来源（例如，/asset/* 可能指向存储桶，而默认行为指向应用程序本身）。

在这种情况下，CloudFront 的主要用途不是作为 CDN，而是利用次要用途，将其用作反向代理，可以选择性地将请求路由到多个后端，基于请求的路径，而浏览器并没有意识到实际上有多个来源，因为所有内容都位于指向 CloudFront 的单个主机名后面（显然，您需要在 DNS 中指向 CloudFront。）

如果您还不想/不需要/完全理解缓存功能，可以禁用它们，特别是对应用程序本身的请求，通过选择将所有请求标头转发到源的选项可以轻松禁用缓存，在任何向应用程序本身发送请求的缓存行为中。对于 S3 中的对象，请确保在上传对象时已在对象上设置了适当的 Cache-Control 标头，或者您可以在上传后使用 S3 控制台添加它们。

附带的好处是，使用 CloudFront，您可以使用来自 Amazon Certificate Manager (ACM) 的免费 SSL 证书轻松为整个站点启用 SSL。无论您的存储桶在哪里，都需要在 ACM 的 us-east-1 区域中创建证书，因为这是 CloudFront 从 ACM 获取证书时使用的区域。这只是一个配置角色，如果您的存储桶位于其他区域，则不会影响性能。

【讨论】：

我的联系信息在我的个人资料中。前 5 分钟免费。 :)

我应该说 15 分钟的聊天 :) 啊哈

【参考方案2】：

您需要在您的 AWS-S3 存储桶的 CORS 配置中允许您的主机。

参考Editing Bucket Permissions中的添加CORS配置。

因此，此后，您对 S3 存储桶文件发出的每个请求都将设置 CORS 标头。

如果您需要通过 AWS-CDN CloudFront 提供内容，请按照以下步骤操作，如果您直接通过 S3 提供内容，请忽略：

转到 AWS CloudFront 控制台。 选择您的 CloudFront 分配。 转到“行为”选项卡。 创建行为（用于需要使用 CORS 标头提供的文件）。 输入路径模式，选择协议和方法。 在转发标题选项中选择All。 保存行为。 如果需要，通过对您刚刚允许用于 CORS 的文件运行失效请求来使 CloudFront 边缘缓存失效。