From AWS document, when u want to cache objects at browser, From S3 or from Cloudfront, at the same time support CORs resources like font, You can use a parameter MaxAgeSeconds: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
With all the tests i tried Chrome don’t really respect MaxAgeSeconds , you still need traditional Cache-Control: Max-age=xxx AND Expires: into header. When using AWS Cloudfront as your edge cache / CDN, and especially adding S3 as your origin, you take special care of your cache headers.
You can use API / CLI / UI to change the cache header at the metadata session of S3.
And at your bucket policy’s permission, set CORs
Once you success in setting up those things, you can curl -I -H to test your settings. If you use Chrome to test, REMEMBER
- DONT click refresh
- DONT click CMD +R
- Click another link in your website to test
Otherwise, you will end up in lots of confusion !
curl -I http://xxxxxx.example.com/fonts/Neutra2Display-Titling.woff -H “Origin: xxxx.example.com”
first time u will see “Miss From Cloudfront”, if it is your production site url, you may ask why ? You should have many people visiting this obejcy. As the header is different than normal browser, Cloudfront treat it as a new object. So, no worry.
At the second time you curl, you will see “HIT from cloudfront”. So with this setup your resource (this time is font), will be cached on Cloudfront a long time and then once downloaded to browser, it will locally cached as the Cache-control: max-age set.
P.S. Cloudfront respect Cache-Control, so how long your browser will cache = how long your object will stay on Cloudfront.
With MaxAgeSeconds only, your resource can keep at browser with 304.
With Cache-control and expires header, your resource can keep at 200, from cache.
Question: So what does MaxAgeSeconds do here ? Any special require that we always want 304 but not 200, from cache ? I need someone to answer me as well🙂