---
title: "Fixing CORS issue with AWS services"
description:
  "Explains how to fix the CORS issue when working with AWS Cloudfront and S3"
canonical_url: "https://www.bigbinary.com/blog/fixing-cors-issue-with-aws-services"
markdown_url: "https://www.bigbinary.com/blog/fixing-cors-issue-with-aws-services.md"
---

# Fixing CORS issue with AWS services

Explains how to fix the CORS issue when working with AWS Cloudfront and S3

- Author: Narendra Rajput
- Published: October 31, 2017
- Categories: Misc

While working on a client project, we started facing an issue where the JWPlayer
stopped playing videos when we switched to
[hls](https://en.wikipedia.org/wiki/HTTP_Live_Streaming) version of videos. We
found a
[CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
error in the JS console as shown below.

![cors error](https://www.bigbinary.com/blog/images/images_used_in_blog/2017/fixing-cors-issue-with-aws-services/cors_error.png)

After researching we found that JWPlayer makes an AJAX request to load the
[m3u8](https://en.wikipedia.org/wiki/M3U#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](http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html) is the official
documentation on configuring CORS for S3.

![s3 cors configuration](https://www.bigbinary.com/blog/images/images_used_in_blog/2017/fixing-cors-issue-with-aws-services/s3_cors_configuration.png)

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

## Cloudfront configuration changes

[Cloudfront](http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html)
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.

![cloudfront behaviour](https://www.bigbinary.com/blog/images/images_used_in_blog/2017/fixing-cors-issue-with-aws-services/cloudfront_behaviour.png)

## Links

- [Human page](https://www.bigbinary.com/blog/fixing-cors-issue-with-aws-services)