在React或Vue中使用前端路由的history模式时,由于服务端会配合使用URL Rewrite技术,产生的效果就是,SPA页面多个path的请求实际返回的是同一个入口文件。

GET https://idealecho.cn/spa/apath
GET https://idealecho.cn/spa/bpath

Response https://idealecho.cn/spa/index.html

在页面采用强缓存策略的情况下,当服务端文件更新后,用户需要手动刷新页面强行使用协商缓存机制获取最新版本,并更新本地缓存副本。而浏览器对页面进行缓存,使用的key是请求中的path值,这就导致本地会产生多份入口文件的缓存副本,并且版本可能并不一致。

在上例中,浏览器为/spa/apath/spa/bpath两个path分别缓存index.html文件副本,last-modifiedetag可能不同。

除非用户对多个path分别手动刷新,否则很容易造成通过链接在多个path间跳转时,页面在新旧版本间变换。

尤其当开发者对某个path做了自动重定向redirect,让用户很难对原始path手动刷新,也就没法更新对应的缓存。这样即便对其他所有path都进行了刷新,但只要通过前述path进入页面,都会得到页面的旧版本。

解决办法:

第一种,对入口文件index.html设置Cache-Control: no-cache以禁用本地缓存;

第二种,服务端保存一个前端最新产出的版本号,页面定时拉取这个版本号与自身版本号对比,发现过期即刷新页面。

标签: none

已有 15 条评论

  1. 内容的丰富性和深度让人仿佛置身于知识的海洋,受益匪浅。

  2. 作者的布局谋篇匠心独运,让读者在阅读中享受到了思维的乐趣。

  3. 若能结合热点事件分析,会更富时代性。

  4. 全球视野与本土实践结合恰到好处。

  5. 文化底蕴深厚,引经据典信手拈来。

  6. 案例丰富,数据详实,论证扎实可信。

  7. ?批判性评语?

  8. 文章紧扣主题,观点鲜明,展现出深刻的思考维度。

  9. 内容的丰富性和深度让人仿佛置身于知识的海洋,受益匪浅。

  10. 案例丰富且贴合主题,论证逻辑环环相扣。

  11. 新盘 上车集合 留下 我要发发 立马进裙coinsrore.com

  12. 新车上路,只带前10个人

  13. 2025年10月新盘 做第一批吃螃蟹的人coinsrore.com

  14. 2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
    新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
    新车首发,新的一年,只带想赚米的人coinsrore.com
    新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
    做了几十年的项目 我总结了最好的一个盘(纯干货)coinsrore.com
    新车上路,只带前10个人coinsrore.com
    新盘首开 新盘首开 征召客户!!!coinsrore.com
    新项目准备上线,寻找志同道合的合作伙伴coinsrore.com
    新车即将上线 真正的项目,期待你的参与coinsrore.com
    新盘新项目,不再等待,现在就是最佳上车机会!coinsrore.com
    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹!coinsrore.com

  15. 2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
    新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
    新车首发,新的一年,只带想赚米的人coinsrore.com
    新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
    做了几十年的项目 我总结了最好的一个盘(纯干货)coinsrore.com
    新车上路,只带前10个人coinsrore.com
    新盘首开 新盘首开 征召客户!!!coinsrore.com
    新项目准备上线,寻找志同道合 的合作伙伴coinsrore.com
    新车即将上线 真正的项目,期待你的参与coinsrore.com
    新盘新项目,不再等待,现在就是最佳上车机会!coinsrore.com
    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹!coinsrore.com

添加新评论