SPA 配置错误导致 index.html 被用户浏览器缓存了,不刷新页面就一直是旧版本,有办法在 SPA 请求的 API 请求的响应头中告诉浏览器需要清除全部页面的缓存吗? StackOverflow 找了很久,没有一个方案是可用的。

2022-11-11 17:04:00 +08:00
 edis0n0
把 index.html 删了都没用,浏览器根本不会为这个网页发送请求。
3505 次点击
所在节点    程序员
16 条回复
yaphets666
2022-11-11 17:27:30 +08:00
service worker 的 cache? 这个以前看过一些,但是具体的技术细节要你自己去看
winglight2016
2022-11-11 17:33:30 +08:00
入口被缓存了,这大概无解了。不过可以试试,nginx 设置索引页面为 index.htm
bojackhorseman
2022-11-11 17:37:01 +08:00
找运维看配置下 nginx
oott123
2022-11-11 17:39:43 +08:00
巧了,还真的有一个: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Clear-Site-Data
但要不是同一个子域名的话可能也不管用
sujin190
2022-11-11 17:57:39 +08:00
如果是入口页并不会完全缓存不发请求吧
如果你是配置了 manifest 指明首页可以离线使用,那么肯定会请求 manifest 信息啊,你通过新的 manifest 返回首页过期信息就行了吧
如果 service worker ,那么启动 service worker 的 sw.js 会请求,再里边写删缓存的代码就行吧,所以你这个不能清是个啥情况。。
edis0n0
2022-11-11 18:07:43 +08:00
@sujin190 #5 没有 service worker ,入口页还是被缓存了,浏览器 network 里所有访问过的路由都会显示 cache from disk ( IIS 默认配置+ASP.NET Core with Angular 的官方模板 就存在这个问题,100%复现)
ragnaroks
2022-11-11 19:59:11 +08:00
试下 #4 的方法?说实话我做网站开放那么长时间都没遇到这种问题,但是你描述的这个问题我一时间和你一样完全没有头绪。我现在想到的是永远不要让 MIME text/html 的缓存时间大于域名 TTL 。
edis0n0
2022-11-11 20:07:38 +08:00
@ragnaroks #7 目前就是做了一个 interceptor 在新版本所有请求加上前端程序版本号,后端发现没传或低于做的版本号就在请求头加上 4 楼的内容并返回 400 错误要求用户刷新。
shunia
2022-11-11 22:24:30 +08:00
接口推送一个前端能处理的错误号,能处理的意思是最好能让用户看到错了。这样用户会想办法处理,或者反馈客服,这个过程用户就有机会清理掉缓存了。
加版本号没啥用啊,SPA 的话只要不缓存 index.html 就行了。
edis0n0
2022-11-11 22:37:57 +08:00
@shunia #9 没传版本号的就是存在这个 index.html 被缓存问题的用户,这些用户浏览器上的版本无法被更新,只能通过这种方式标记出来要求用户刷新解决问题。
edis0n0
2022-11-11 22:40:25 +08:00
@edis0n0 #8 做的=>最低 字打错了
wu67
2022-11-11 23:41:50 +08:00
一个我曾经用过的思路:
你们的后台管理, 做一个客户端版本号的表单页.
让接口每次返回都把这个版本号带到返回数据里面, 这个版本号可以缓存, 不用每次读数据库, 但务必保证后台管理页更新时, 这个缓存会刷新.
这时你在前端项目里也用上版本号, 每次发版都更新, 在请求响应拦截里面操作你应该会了吧, 接口版本更高就刷新页面. 你也可以做一个心跳轮询, 如果项目里面本身就有 websocket 就更容易了, 直接推送.
90xchun
2022-11-12 06:11:13 +08:00
可以参考一下 nextjs 的实现逻辑,nextjs 每次 csr 的时候数据请求会 _next/ 加一个随机的字符,nextjs 每次 build 完后都会不一样,所以有新版本时候用户在页面点击下一个页面时,csr 的接口就会 404 ,然后就会强制重新加载整个页面,以保证用户在接下来的操作都是在最新的版本上进行的
LittleDust
2022-11-12 06:45:50 +08:00
302 重定向到一个新的页面的
C603H6r18Q1mSP9N
2022-11-12 09:30:34 +08:00
我们后端会维护一个版本号,前端本地有版本号变量,首页请求下最新版本号,和本地不一致,直接 index.html?t=new Date().getTime()
简单好使
IvanLi127
2022-11-12 10:42:30 +08:00
已经不请求了,要么让用户手动强刷页面或者换浏览器访问,要么找个还能向服务器请求的 js 文件或者做 xss 注入并执行的代码,把浏览器跳转到新页面去,保业务能用先。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/894532

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX