index.html缓存导致加载文件不是最新的解决方法

本文介绍了解决前端单页面应用中index.html缓存导致加载文件不是最新版本的问题。通过在Nginx配置中添加no-cache、no-store等指令来避免浏览器及代理服务器缓存index.html,确保用户每次都能加载到最新的页面内容。
摘要由CSDN通过智能技术生成

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值