CORS with Amazon S3 and CloudFront

We struggle to load fonts from CloudFront because of CORS.

CORS - Cross Origin Resource Sharing is a security measure to block macious scripts or resources loading from foreign domain origins. This security will become hurdle when want to load resources from Amazon CloudFront this is often encountered when we want to load fonts from CloudFront. Here are simple yet detailed steps to enable CORS on CloudFront.

S3

we need to enable origin header in S3 and to do that follow these steps.

  • open s3 and click on bucket properties, under "permissions" section you will see "Edit CORS Configuration"
  • open CORS Configuration and paste the following
            *
            GET
            3000
            Authorization
            Content-*
            Host
  • save it and you are done.
  • Here you can increase "MaxAgeSeconds" it defines the cache time in browser. Its better to have a greater value if you are serving static files those will not change often.

CloudFront

CloudFront will cache content from S3 bucket but we need to enable CORS headers to load fronts from it. And to do that, here are the steps to perform on CloudFront.

  • Open your CloudFront distribution and under "Behaviours", click on default behaviours and edit it.
  • Set "Forward Headers" to "whitelist"
  • enable "Origin" from "Whitelist Headers" by moving it to right side.
  • Save the settings and you are done with it, these settings will be reflected shorly based on the cache settings you had in S3 CORS Configuration.

Happy serving content with Amazon CloudFront.

Posted On 24 November 2012 By MicroPyramid


Need any Help in your Project?Let's Talk

Latest Comments
how to setup custom domain for amazon cloudfront

We all want our own domain name to be setup for cloud front instead of amazon default cloud front domain name. We need two things ...

Continue Reading...
How To Send And Receive Email With Django And Amazon SES

django-ses-gateway a pluggable Django application is used for sending mails from your verified domains and verified emails. We can also use django-ses-gateway for receiving messages ...

Continue Reading...
How to Build and verify an application using aws codepipeline and creating custom events with lambda

How to build and verify an application using aws codepipeline and creating custom events with lambda.

Continue Reading...

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties