自建钉钉企业内部应用h5页面缓存严重问题
前端设置添加了页面meta标签，包括项目打包hash文件名，后端也设置了响应头过期时间为0，nginx也配置了不缓存index.html。但是项目发布后，前端修改的代码在钉钉工作台h5进入并不能即时更新，包括项目中使用fetch进行no-cache标头进行请求项目版本文件方法也失效，包括后端修改数据库后再次访问接口，也是使用的缓存数据，请问各位大佬，还有什么解决的办法吗
展开
收起
1
条回答
写回答
写回答
-
这个问题涉及到前后端协同以及多个层级的缓存控制。针对你所描述的情况，以下是一些排查和解决方案：
前端 meta 标签
- 你应该已经在 HTML 文件中的
<head>区域设置了如下的元标签，以禁用浏览器缓存：<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> - 确保每个被缓存问题困扰的资源（特别是动态脚本和样式表）都带有正确的
Cache-Control头部或哈希指纹，例如通过 Webpack 打包时加上[contenthash]。
- 你应该已经在 HTML 文件中的
后端响应头
- 后端应当为所有不应缓存的动态接口设置合适的响应头，比如：
Cache-Control: no-cache, no-store, max-age=0, must-revalidate Pragma: no-cache Expires: 0
- 后端应当为所有不应缓存的动态接口设置合适的响应头，比如：
Nginx 配置
- 对于入口的
index.html文件，确保 Nginx 配置了不缓存策略，例如：location = /index.html { add_header Cache-Control 'no-cache, no-store, must-revalidate'; expires off; } - 如果整个应用都是动态内容，可以考虑全局禁用缓存，或者至少对动态API路径做相应配置。
- 对于入口的
Fetch 请求
- 使用 Fetch API 发送请求时，明确指定
no-cache缓存模式：fetch(url, { headers: { 'Cache-Control': 'no-cache', }, mode: 'cors', // 如果跨域的话 });
- 使用 Fetch API 发送请求时，明确指定
- 服务端主动推送更新
- 对于某些场景，可以尝试使用HTTP/2的Server-Sent Events (SSE) 或 WebSocket 推送更新通知给客户端。
2024-01-29 18:05:22赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
