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

Question

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

强缓存 和 协商缓存

缓存分为 强缓存 和 协商缓存，详细介绍 参考这里：

• 当 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请求是调用的后端接口，响应头部并没有设置过跟缓存相关的头部，因此缓存基本属于浏览器的行为：

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

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

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