How to set Cache-Control Header in amazon cloudfront?

Question

I have a amazon cloudfront distribution that creates a 'origin' to my CDN. In my behavior, I set the Max TTL, Min TTL and default TTL. But my response header does't return the Cache-control header in my static files that are redirected. How to set the cache-control? I need this for the google page insights

Files to create cache-control

My header responses

Solution 1

You can : 1. configure origin to add the Cache-Control header in response. Or 2. use Lambda@edge (Viewer response as you just want to use it for google page insights) to add Cache-control header in the response. Example: https://github.com/jkrnak/serverless-lambda-at-edge/blob/master/handler.js

Defining TTL doesn't add any cache-control header, it uses to consider how long it need to cache.

Solution 2

As mentioned by James, the MAX TTL, MIN TTL, etc that you see in the CF settings when you are creating a distribution, defines the caching behaviour of the CloudFront distribution and the Origin. In other words how long CloudFront should keep the assets in the Edge Locations before checking the origin. For example, if you have an S3 bucket as the origin and then a CloudFront distribution, by setting MAX TTL Min TTL etc you tell CloudFront how often it should check the origin (in this case S3) for changes. You can learn more about it in AWS Docs. Managing How Long Content Stays in an Edge Cache (Expiration).

In the example above you can go to S3 bucket and set the Cache-Control. For more information how to do it read this one.

Solution 3

You can add a Cache-Control header to your CloudFront instance without the use of functions.

• Go to AWS Console and navigate to the CloudFront instance
• Go to Policies -> Response Headers and click on "Create response header policy" under custom policies. If you have an existing policy edit it.
• In the next screen under Custom headers add, Cache-Control header along with the max age value you want. This value can be set to override origin if you want it.
• Now go to your Distribution and navigate to the Behaviours tab.
• In your default behaviour, under the Response headers policy select the one you just created.

All your responses will now include the cache headers you have set.

Comments

[Gregory Ledray]

Setting Cache-Control on the S3 bucket via the directions in your second link was the correct solution. You can't set Cache-Control on CloudFront's origin; this is not allowed by CloudFront right now. The OP (and me) just wanted to pass the Lighthouse tests and the only way to do that is to set Cache-Control on the bucket's items.

[gaurav5430]

S3 interface for setting headers is unwieldy and you need to set the headers again if you replace the file. This might be ok for you if your static files are autogenerated through a script, but in our case we setup a lambda to return cache control headers to the browser for certain static asset files

[ThirstyMonkey]

Note that this is a recent feature, only released in November 2021. It absolutely solves the original problem, though, and is definitely the best solution now!

[Fabien Snauwaert]

Someone looking to set the cache-control value (for existing and future files) to a CloudFront distribution that uses S3 as source will most certainly want to enable the Origin override option. That's because, afaik, there is no way of setting a default cache-control value for an S3 bucket. (You can only set it for individual files; if override is not set, the default, immutable, value of 604800 will be used for new files or files that do not have a custom value set.)