Question

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

在野生动物园测试之前这很好，我意识到它不起作用。原因是因为safari不支持通过WebGL播放视频的CORS（跨源资源共享）。

要澄清一下，如果我的视频在同一台服务器上与我的应用程序文件一起工作，但是因为我的文件托管在亚马逊s3上，它们就是CORS。现在我不确定要做什么，因为我在数字海洋上建立了我的应用程序连接到我的亚马逊s3水桶，但我无法负担我的水滴只是为了得到我需要的存储（大约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，然后请求将它们拉入。

Answer 1

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

我described using this solution to solve a different problem, in detail, on Server Fault。在这种情况下，问题是关于整合主要网站和＆＃34; / blog / *＆＃34;来自单个域名下的不同服务器，构建统一的网站。

出于不同的原因，这与您需要的完全相同。

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

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

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

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

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

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

Answer 2

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

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

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

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

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

在亚马逊Aws上解决跨源资源共享问题

2 个答案: