I'm having problems streaming my video with Amazon CloudFront. I have setup an S3 bucket, transcoded my video file with MediaConvert and created a CloudFront Distribution.
However, when I try to stream my video with VideoJS I get the following error:
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.
When I enter my CloudFront URL in a web browser I get the following response:
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
...
</Error>
Here is the code that streams the file:
<!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>
How can I overcome this issue?
Update 1:
Here is what my Bucket Policies looks like (I've placed three dots wherever I feel that there is personal data):
{
"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/*"
}
]
}
My CORS configuration:
[
{
"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
}
]
Update 2:
I am now able to to download the file if I enter the CloudFront URL and no longer get the AccessDenied response being returned. However, when I access the file from VideoJS from my web server, I still get the CORS error.
