Angular2：AWS S3 中的流式视频 |跨域错误答案

【问题标题】：Angular2: Stream videos present in AWS S3 | Cross Origin errorAngular2：AWS S3 中的流式视频 |跨域错误
【发布时间】：2018-07-03 05:31:01
【问题描述】：

我的应用程序需要在前端播放 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>

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

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

【问题讨论】：

标签： java angular amazon-s3 html5-video amazon-cloudfront

【解决方案1】：

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

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

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

【讨论】：