Close

Enabling cross-domain access in CloudFront

I recently had to allow cross-domain access in Amazon’s CloudFront service for some XML and closed caption files. This is a fairly normal occurrence, especially with a CDN like CloudFront, so you’d think it’d be well documented, right? No? Well it will be after this.

This is a really basic how-to for enabling cross-domain access. It assumes that you have an S3 bucket set up and associated with a CloudFront distribution. You’ll also need admin-level access.

Step 1: enable CORS on your S3 bucket

Go to your S3 bucket in the AWS (Amazon Web Services) console and select it. Click the Properties tab then open the Permissions area. You should see a button labelled ‘Edit CORS Configuration’ or something similar. Click it. You’ve now got a popup called ‘CORS Configuration Editor’ with a big text box in it. Paste your CORS config in there and press save.

Example CORS configuration

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>YOUR DOMAIN HERE</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

This is a very basic CORS configuration for one domain. Replace ‘YOUR DOMAIN HERE’ with your domain (wildcards are allowed). Add an allowed method tag for each HTTP method you want to use (GET, POST, PUT, DELETE). There are more options available as listed at Amazon's How do I enable Cors

Step 2: enable Header Forwarding in CloudFront

Select the CloudFront distribution that’s associated with the S3 bucket you changed above in the AWS console. Click Distribution Settings. Go to the Behaviours tab, click the behaviour (if you have more than one, you’ll need to do the following for all of them) and click Edit. Change the Forward Headers dropdown to Whitelist. Select ‘Origin’ in the left-hand list and click Add to move it to the right-hand list. Click Yes, Edit to save and then wait for CloudFront to propagate the change; about 20 mins to half an hour.

If everything has worked as it should, you should now be able to access your files cross-domain from CloudFront. Congratulations!

References:

http://stackoverflow.com/a/24459590 – accessed on 9/9/14

Amazon's How do I enable Cors

About the author

Rob Waring

Rob Waring

Rob has been working in web development for the last decade, specialising in front-end technologies. A great believer in the power of Agile development practices, he can often be found shuffling post-its around.

Related content

Ansible and Windows

By Kristian Jones

Tech round-up: Sep 2nd

By Steve Anderson

We're hiring. Let's talk. View available roles