How to setup CORS for S3 and CloudFront - ninacoder-info/music-engine-web-wiki GitHub Wiki

HLS streaming on S3 require CORS has to be enabled.

The steps detailed there are as follows:

1, In your S3 bucket go to Permissions -> CORS configuration

2, Add rules for CORS in the editor, the rule is the important one. Save the configuration. 

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

3, If you are using CloudFront, In your CloudFront distribution go to Behavior -> choose a behavior -> Edit

4, Depending on whether you want OPTIONS responses cached or not, there are two ways according to AWS:

  • If you want OPTIONS responses to be cached, do the following:
  • Choose the options for default cache behavior settings that enable caching for OPTIONS responses.
  • Configure CloudFront to forward the following headers: Origin, Access-Control-Request-Headers, and Access-Control-Request-Method.
  • If you don't want OPTIONS responses to be cached, configure CloudFront to forward the Origin header, together with any other headers required by your origin

And with that CORS from CloudFront with S3 should work.

⚠️ **GitHub.com Fallback** ⚠️