{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 仙女界的扛把子 的问题《Amazon Cloudfront Cache-Control: no-cache header h》','https://www.manongdao.com/q-461663.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm hosting a static website in S3 and using Cloudfront to cache files. I've essentially got 3 files with the following headers:
- index.html (Cache-Control: no-cache)
- app.js (Cache-Control: max-age=63072000, public)
- style.css (Cache-Control: max-age=63072000, public)
My html file uses query string parameters that get updated every time I update my css or js files. I've configured s3 to pass these parameters through and I've verified that it works to invalidate cached resources. My index.html file looks something like this:
<html>
<head>
...
<link rel="stylesheet" href="app.css?v=14113e2c764">
</head>
<body>
...
<script src="app.js?v=14113e2c764"></script>
</body>
</html>
It seems to work great as I push updates all day, but when I come in the next morning and push my next change, The index.html file is out of date. Instead of having the correct ?v= parameter, it has the old one! The only way to fix it is to invalidate the html file manually. Then everything works for the rest of the day. The next day I have the same problem again.
What's going on here?
Verify that the CloudFront distribution's
Minimum TTLis set to 0. If it's set to any other value, CloudFront won't respect theno-cacheheader and will still cache the file for theMinimum TTL. More details about the caching directives can be found here:http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html
If this doesn't help, try to debug the actual HTTP request for
index.htmland post the response headers here so we can have a look at them.Also, instead of using
no-cachefor the index.html file, you can try usingpublic, must-revalidate, proxy-revalidate, max-age=0This will allow CloudFront to store the file on the edge location, but it will force it to revalidate it with the origin with each request. If the file hasn't changed, CloudFront will not need to transfer the file's entire content from the origin. This can speed up the response time, especially for larger files.