Fixing CORS issue with AWS services

While working on a client project, we started facing an issue where the JWPlayer stopped playing videos when we switched to hls version of videos. We found a CORS error in the JS console as shown below.

After researching we found that JWPlayer makes an AJAX request to load the m3u8 file. To fix the issue, we needed to enable CORS and for that we needed to make changes to S3 and Cloudfront configurations.

S3 configuration changes

We can configure CORS for the S3 bucket by allowing requests originating from specified hosts. As show in the image below we can find the CORS configuration option in Permissions tab of the S3 bucket. Here is the official documentation on configuring CORS for S3.

S3 bucket will now allow requests originating from the specified hosts.

Cloudfront configuration changes

Cloudfront is a CDN service provided by AWS which uses edge locations to speed up the delivery of static content. Cloudfront takes content from S3 buckets and caches it at edge locations and delivers it to the end user. For enabling CORS we need to configure Cloudfront to allow forwarding of required headers.

We can configure the behavior of Cloudfront by clicking on Cloudfront Distribution's "Distribution Settings". Then from the "Behaviour" tab click on "Edit". Here we need to whitelist the headers that need to be forwarded. Select the "Origin" header to whitelist which is required for CORS, as shown in the image below.