index.html缓存导致加载文件不是最新的解决方法
环境:
前端单页面(Vue) + Nginx
问题:
http://xxx.com/a/ 访问会跳转到 http://xxx.com/a/Index 下,代码有更新访问 http://xxx.com/a/Index 完整链接index.html加载是最新的,访问 http://xxx.com/a/ 还是读取的disk cache的内容,导致加载的页面不是最新的。使得用户不清理缓存展示的内容是错误的。
解决方法:
nginx下配置no-cache、no-store
示例:
location /a {
add_header Cache-Control 'no-cache, no-store, must-revalidate,proxy-revalidate, max-age=0';
}
no-cache:可以在本地缓存,可以在代理服务器缓存,但是这个缓存要服务器验证才可以使用。index.html没有改变,浏览器状态码是304。
no-store: 本地和代理服务器都不缓存,每次都从服务器获取。index.html状态码始终是200。
must-revalidate: 缓存必须在使用之前验证旧资源的状态,并且不可使用过期资源。表示如果页面过期,则去服务器进行获取。
proxy-revalidate: 与must-revalidate作用相同,但它仅适用于共享缓存(例如代理),并被私有缓存忽略。
max-age=: 设置缓存存储的最大周期,超过这个时间缓存被认为过期(单位秒)。与Expires相反,时间是相对于请求的时间。max-age会覆盖掉Expires。
在chrome network查看请求资源的时候,发现浏览器缓存有3中情况。
memory cache
不访问服务器,直接读缓存。从内存中读取,一般缓存资源不大的图片等,浏览器关闭数据不再。
disk cache
不访问服务器,直接读缓存,从磁盘中读取缓存,当kill进程时,数据还是存在。一般缓存资源较大的js、css等。
304
访问服务器,发现数据没有更新,服务器返回此状态码。然后从缓存中读取数据。
参考:
https://www.zhihu.com/question/64201378
https://blog.csdn.net/zs343961443/article/details/87258217