您当前的位置:首页 > 计算机 > 软件应用 > 浏览器应用

记录一个浏览器缓存的问题

时间:12-14来源:作者:点击数:
城东书院 www.cdsy.xyz

网站登出后,浏览器回退,发现发送的 Ajax 请求仍旧为 200

强缓存 和 协商缓存

缓存分为 强缓存 和 协商缓存,详细介绍 参考这里:github.com/amandakelake/blog/issues/41

  • 当 Cache-Control 和 Expires 符合条件,会使用强缓存,返回 200,from dist cache 或 from memory cache
  • 当 Last-Modified,If-Modified-Since 和 ETag、If-None-Match 符合条件,会出现 304 Not Modified。

问题分析

发现项目中的其他资源,比如图片、js 都会符合上述的几种缓存情况,因为 Web 服务器,会帮我们应用缓存的各种策略。

但是项目中的Ajax请求是调用的后端接口,响应头部并没有设置过跟缓存相关的头部,因此缓存基本属于浏览器的行为:

stackoverflow提问:prevent-chrome-from-caching-ajax-requests 提到了两种解决办法:

  • GET 请求才进行浏览器缓存,可以考虑将请求改为 POST
  • 通过在请求地址上加上时间戳 '?_=' + (new Date()).getTime()

显然第一种方式需要后端配合略麻烦,直接其使用第二种方式,全局的 axios 拦截中给 GET 请求添加下即可。

城东书院 www.cdsy.xyz
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐