Question

我的应用程序要求S3中存在的视频文件在前端播放，但似乎无法读取它。浏览器控制台上的错误说：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-eu-west-1.amazonaws.com/mybucket/Oct17/myvideo.mov. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
All candidate resources failed to load. Media load paused.

加载视频的组件是：

<video #media [vgMedia]="media" id="singleVideo" preload="auto" crossorigin>
  <source src="https://s3-eu-west-1.amazonaws.com/mybucket/Oct17/myvideo.mov" type="video/mp4">
</video>

现在，这只是一个视频，但我有一个db映射，其中包含这些使用awscli复制命令上传到文件夹的S3视频网址。 mybucket内的不同文件夹下有很多视频。对于一个或两个视频，我可以使用AWS CloudFront发布这些视频，当我在src属性下提供该网址时，视频播放效果正常。

知道如何通过S3网址流式传输这些视频，或者如何为所有上传的视频创建CloudFront网址？

Answer 1

您需要在S3中启用跨源资源共享。 This描述了如何做到这一点。

这是一个简单的策略，可以启用GET请求。

 <CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Angular2：流式传输AWS S3中的视频Cross Origin错误

1 个答案: