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 resource.

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.

At Box UK we have a strong team of bespoke software consultants with more than two decades of bespoke software development experience. If you’re interested in finding out more about how we can help you, contact us on +44 (0)20 7439 1900 or email info@boxuk.com.

Achieve enterprise level platforms which deliver against your goals.

Book your free consultation