Thomas McGoey-Smith

Fixing CORS Issue with CloudFront

If you’re wanting to use CloudFront to host your own fonts, chances are you’ll have to fix a Cross-origin Resource Sharing (CORS) issue.

Luckily, there’s a really quick fix!

First off, make sure you actually have a CORS policy in place.

This can be found in the S3 bucket properties tab -> under permissions

Editing CORS Permissions

Next just add/edit your bucket’s CORS policy

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Now I originally adjusted AllowedOrigin to use my domain i.e. http://tamcgoey.com, however this caused some weird problems. So I felt it was best just to keep it as a wildcard ().*

Finally all you need to do is make a small adjustment in your CloudFront distribution behaviors settings.

Behaviors Settings

Change your Forward Headers to Whitelist, and under the filter section make sure you add just Origin.

Update your whitelist

Grab a coffee and enjoy.

This article was inspired by a Stackoverflow Post and AWS blog post.

@tamcgoey on Aug 03, 2014

Enjoyed the article? Subscribe to my newsletter for more.

© Thomas McGoey-Smith (2014-2018). RSS.