Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Problem streaming HLS through AWS CloudFront


I'm getting this error when trying to stream HLS audio files from CloudFront:

(URL intentionally obscured but the domains do match except for the subdomain)
Fetch API cannot load https://library.*************.co/160k-hls/*************/************-160k-hls.m3u8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.*************.co' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I have the same error when using the direct CloudFront URL. I set up a DNS CNAME that points to the CloudFront URL so that the request is on the same domain but it still has the same error.

This all works fine in Safari, which supports HLS natively so the JWPlayer doesn't use Flash to stream HLS.

So, I suspect that the error is related to the Flash Cross Domain issue mentioned at the bottom of this page but I don't know how to fix it:
https://support.jwplayer.com/customer/portal/articles/1430189

Here's what it says:
===========================================
Crossdomain and 302

Note that, when playing in Flash, both the M3U8 manifests and the TS segments are subject to crossdomain security restrictions. See Crossdomain File Loading for more information.

An additional limitation to keep in mind is that JW Player does not support 302 redirects on the M3U8 manifest/playlist files, since the Adobe Flash player does not support the combination of crossdomain loading and redirects. We advise to instead use DNS load-balancing or serve up a dynamic M3U8 manifest, containing direct links to the M3U8 playlists on the target servers.
=============================================

1 Community Answers

j...

User  
0 rated :

One additional note:
I do have a standard CORS policy on the S3 bucket where the audio files are stored, and this policy works fine for all of my other CORS requests via CloudFront to S3, just not for HLS streaming requests outside of Safari:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

This question has received the maximum number of answers.