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 encounter when we want to load fonts from CloudFront. Here is 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.

  1. open s3 and click on bucket properties, under "permissions" section you will see "Edit CORS Configuration"
  2. open CORS Configuration and paste the following
       
            *
            GET
            3000
            Authorization
            Content-*
            Host
       
  3. save it and you are done.
  4. Here you can increase "MaxAgeSeconds" it defines the cache time in browser. Its better to have a greater value if you are serving staic 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, ere are the steps to perform on CloudFront.

  1. Open your CloudFront distribution and under "Behaviours", click on default behaviours and edit it.
  2. Set "Forward Headers" to "whitelist"
  3. enable "Origin" from "Whitelist Headers" by moving it to right side.
  4. 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.

Subscribe To our news letter

Subscribe to our news letter to receive latest blog posts into your inbox. Please fill your email address in the below form.
*We don't provide your email contact details to any third parties
Latest Comments
Related Articles
How to access EC2 instance even if pem file is lost Dinesh Deshmukh

Accessing the EC2 instance even if you loose the pem file is rather easy.

1. First, create a new instance by creating new access ...

Continue Reading...
Paginating S3 objects using boto3 Jagadeesh V

When using Boto you can only List 1000 objects per request. So to obtain all the objects in the bucket. You can use s3's paginator.

Continue Reading...
Creating Elastic Search Cluster (EC2, cloud-aws Plugin) Jagadeesh V

While handling Large amounts of data with elasticsearch, you may run out of server capacity or compute power, Forming a Elasticsearch cluster will reduce the ...

Continue Reading...