在Amazon Aws上绕过跨源资源共享 [英] get around cross-origin resource sharing on Amazon Aws

问题描述

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

I am creating a Virtual reality 360-degree video website using the krpano html5 player.

这是伟大的，直到测试safari，我意识到它没有工作。原因是safari不支持通过WebGL的视频的CORS（跨源资源共享）。

This was going great until testing on safari and I realised it didn't work. The reason for this is because safari does not support CORS (cross-origin resource sharing) for videos going through WebGL.

要澄清，如果我的视频在同一个服务器上与我的应用程序文件，它将工作，但因为我有我的文件托管在Amazon s3，他们是CORS。现在我不确定该怎么办，因为我已经建立了我的应用程序在数字海洋连接到我的亚马逊s3桶，但我不能负担得起我的水滴只是为了获得我需要的存储（这是大约100GB开始，并将增加在未来到Terrabytes和我的视频集合越来越大）。

To clarify, if my videos where on the same server with my application files it would work, but because I have my files hosted on Amazon s3 , they are CORS. Now I'm unsure what to do because I have built my application on digital ocean which connects to my amazon s3 bucket, but I cannot afford to up my droplet just to get the storage I need(which is around 100GB to start and will increase in the future to Terrabytes and my video collection gets bigger).

因此，任何人都知道我可以绕过这个方法，使它看起来像视频不是来自不同的来源，或者我可以做的，障碍？

So does anyone know a way I can get around this to make it seem like the video is not coming from a different origin or alternatively anything I can do to get past this obstacle?

有没有什么方法可以设置亚马逊s3和亚马逊EC2，使他们不会看到对方作为跨源资源共享？

Is there any way that I could set up amazon s3 and amazon EC2 so that they dont see each other as cross-origin resource sharing?

EDIT：

我加载我的视频：

<script>

function showVideo(){
    embedpano({

        swf:"/krpano/krpano.swf",

        xml:"/krpano/videopano.xml",

        target:"pano",

        html5:"only",

    });

}

</script>

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

This then calls my xml file which calls the video file:

<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 core是如何工作的， XML文件，然后发出请求将其拉入。

I don't know exactly how krpano core works, I assume it the javascript gets the URLs from the XML file and then makes a request to pull them in.

推荐答案

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

@datasage mentions in comments that CloudFront is a common solution. I don't know if this is what he was thinking of but it certainly will work.

我描述使用此解决方案解决不同的问题，详细地，在服务器故障。在这种情况下，问题是关于在单个域名下集成主站点和来自不同服务器的/ blog / *，从而形成统一的网站。

I described using this solution to solve a different problem, in detail, on Server Fault. In that case, the question was about integrating the main site and "/blog/*" from a different server under a single domain name, making a unified web site.

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

Create a CloudFront distribution, setting the alternate domain name to your site's name.

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

Create two (or more) origin servers pointing to your dynamic and static content origin servers.

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

Use one of them as default, initially handling all possible path patterns (*, the default cache behavior) and then carve out appropriate paths to point to the other origin (e.g. /asset/* might point to the bucket, while the default behavior points to the application itself).

在这种情况下，CloudFront除了作为CDN的主要用途之外，还在使用，相反，我们利用次要目的，将其用作反向代理可以根据请求的路径选择性地将请求路由到多个后端，而浏览器不知道实际上有多个源，因为一切都位于指向CloudFront的单个主机名的后面（显然，需要指向DNS中的CloudFront。）

In this case, CloudFront is being used other than for its primary purpose as a CDN and instead, we're leveraging a secondary purpose, using it as a reverse proxy that can selectively route requests to multiple back-ends, based on the path of the request, without the browser being aware that there are in fact multiple origins, because everything sits behind the single hostname that points to CloudFront (which, obviously, you'll need to point to CloudFront in DNS.)

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

The caching features can be disabled if you don't yet want/need/fully-understand them, particularly on requests to the application itself, where disabling caching is easily done by selecting the option to forward all request headers to the origin, in any cache behavior that sends requests to the application itself. For your objects in S3, be sure you've set appropriate Cache-Control headers on the objects when you uploaded them, or you can add them after uploading, using the S3 console.

使用CloudFront的侧面奖励使您可以通过Amazon证书管理器（ACM）的免费SSL证书轻松为整个网站启用SSL。无论您的存储桶位于何处，都需要在ACM的us-east-1区域中创建证书，因为这是CloudFront从ACM获取证书时使用的区域。这只是配置角色，如果您的存储桶在其他区域，则没有性能影响。

Side bonus, using CloudFront allows you to easily enable SSL for the entire site, with a free SSL certificate from Amazon Certificate Manager (ACM). The certificate needs to be created in the us-east-1 region of ACM, regardless of where your bucket is, because that is the region CloudFront uses when fetching the cert from ACM. This is a provisioning role only, and has no performance implications if your bucket is in another region.

这篇关于在Amazon Aws上绕过跨源资源共享的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！