AWS CloudFront - CORS 策略问题

问题描述

我在使用 Amazon CloudFront 流式传输视频时遇到问题。我已经设置了一个 S3 存储桶，使用 MediaConvert 对我的视频文件进行了转码，并创建了一个 CloudFront 分配。

但是，当我尝试使用 VideoJS 流式传输视频时，出现以下错误：

Access to XMLHttpRequest at 'my-cloudfront-URL' from origin 'my-website-URL' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当我在网络浏览器中输入我的 CloudFront URL 时，我得到以下响应：

<Error>
   <Code>AccessDenied</Code>
   <Message>Access Denied</Message>
   ...
</Error>

这是流式传输文件的代码：

<!DOCTYPE html>

<html>

    <body>
        <video-js id=vid1 width=600 height=300 class="vjs-default-skin" controls>
            <source
               src="my-CloudFront-distribution"
               type="application/x-mpegURL">
          </video-js>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.0/video.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.js"></script>
          <script>
          var player = videojs('vid1');
          player.play();
          </script>
    </body>

</html>

我该如何克服这个问题？

更新 1：

这是我的存储桶策略的样子（我在我认为有个人数据的地方放了三个点）：

{
    "Version": "2008-10-17","Id": "PolicyForCloudFrontPrivateContent","Statement": [
        {
            "Sid": "1","Effect": "Allow","Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ..."
            },"Action": "s3:Getobject","Resource": "arn:aws:s3:::educationvids/*"
        }
    ]
}

我的 CORS 配置：

[
    {
        "AllowedHeaders": [
            "*"
        ],"AllowedMethods": [
            "PUT","POST","DELETE","GET"
        ],"AllowedOrigins": [
            "https://www.moodleapi.co.za/"
        ],"ExposeHeaders": [
            "x-amz-server-side-encryption","x-amz-request-id","x-amz-id-2"
        ],"MaxAgeSeconds": 3000
    }
]

更新 2：

如果我输入 CloudFront URL 并且不再收到返回的 AccessDenied 响应，我现在可以下载文件。但是，当我从网络服务器的 VideoJS 访问文件时，我仍然收到 CORS 错误。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

amazon-cloudfront amazon-web-services video.js