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

• Deliver Custom Content on CloudFront