Amazon CloudFront and CORS

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

  1. Enable Origin headers to pass though
  • open Distribution
  • click Behaviors
  • select Origin
  • select Whitelist on Cache Based on Selected Request Headers dropdown
  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

Like what you read? Give Dmitry Larkin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.