Amazon CloudFront and CORS

Dmitry Larkin
Sep 27, 2017 · 2 min read

Sometimes you need to share some static content stored on Amazon S3. Here is a quick recipe.

  1. Create Origin Access Identity on CloudFront Dashboard
Image for post
  1. Enable CORS on S3 bucket Settings
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>1800</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
  1. Attach policy on S3 bucket settings
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Grant a CloudFront Origin Identity access to support private content",
"Effect": "Allow",
"Principal":{"CanonicalUser":"920....f28fbe417dc"},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-bucket-name/*"
}
]
}

HINT: policy above might be attached automatically while distribution origin edited and bucket policy update selected

Image for post
  1. Enable Origin headers to pass though
  • open Distribution
  • click Behaviors
  • select Origin
  • select Whitelist on Cache Based on Selected Request Headers dropdown
Image for post
  1. Test
curl -I -X GET -H "Origin: http://example.com" --verbose http://aaaabbbbccccdd.cloudfront.net/some/cached/file.png
* Trying 54.192.230.157...
* TCP_NODELAY set
* Connected to aaaabbbbccccdd.cloudfront.net (54.192.230.157) port 80 (#0)
> GET /some/cached/file.png HTTP/1.1
> Host: aaaabbbbccccdd.cloudfront.net
> User-Agent: curl/7.54.0
> Accept: */*
> Origin: http://example.com
>
< HTTP/1.1 200 OK
HTTP/1.1 200 OK
< Content-Type: binary/octet-stream
Content-Type: binary/octet-stream
< Content-Length: 384521
Content-Length: 384521
< Connection: keep-alive
Connection: keep-alive
< Date: Tue, 26 Sep 2017 23:39:04 GMT
Date: Tue, 26 Sep 2017 23:39:04 GMT
< Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET
Access-Control-Allow-Methods: GET
< Access-Control-Max-Age: 1800
Access-Control-Max-Age: 1800
< Last-Modified: Tue, 26 Sep 2017 22:56:14 GMT
Last-Modified: Tue, 26 Sep 2017 22:56:14 GMT
< ETag: "e3e413b8ac8aa60dc3e4d2a6ee915aa1"
ETag: "e3e413b8ac8aa60dc3e4d2a6ee915aa1"
< Accept-Ranges: bytes
Accept-Ranges: bytes
< Server: AmazonS3
Server: AmazonS3
< Vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
Vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
< X-Cache: Miss from cloudfront
X-Cache: Miss from cloudfront
< Via: 1.1 3a9a1048cb4a6db73953b6ee766598cb.cloudfront.net (CloudFront)
Via: 1.1 3a9a1048cb4a6db73953b6ee766598cb.cloudfront.net (CloudFront)
< X-Amz-Cf-Id: SbaWVTYVVvQLir53HCxygDaPiMrkCZmKHq4d2-VfN0sc1ra-Eii_eg==
X-Amz-Cf-Id: SbaWVTYVVvQLir53HCxygDaPiMrkCZmKHq4d2-VfN0sc1ra-Eii_eg==

<
* Excess found in a non pipelined read: excess = 8076 url = /some/cached/file.png (zero-length body)
* Connection #0 to host aaaabbbbccccdd.cloudfront.net left intact

More

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store