我在使用 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 错误。