如何让浏览器清除特定文件缓存？Azure BLOB头像更新场景

直接让浏览器主动清除单个特定文件的缓存没有通用的原生API，但我们可以通过Azure Blob的缓存配置、版本化策略或者CDN缓存刷新来解决这个问题，既保留99.9%场景下的缓存优势，又能在头像更新时让用户看到新图。

可行方案 #

1. 配置Blob缓存控制头，靠ETag自动验证 #

Azure Blob默认会返回ETag（文件的唯一哈希值）和Last-Modified时间，你可以调整Blob的Cache-Control头：

• 设置为 public, max-age=604800, must-revalidate（max-age设为1周，must-revalidate让浏览器在缓存过期前，先向服务器验证资源是否有更新）
• 用户更新头像时，直接覆盖原Blob文件，Azure会自动生成新的ETag和Last-Modified值
• 浏览器下次请求头像时，会带着旧的ETag发If-None-Match请求，Azure对比后如果发现ETag变了，就返回新文件；没变就返回304（不用重新下载），完美兼顾缓存和更新需求

2. 给Blob加版本元数据，按需更新URL参数 #

如果不想依赖ETag验证，也可以用版本化的思路：

• 用户更新头像时，给对应的Blob添加自定义元数据，比如x-ms-meta-version: v3
• 你的Web应用在返回头像URL时，先查询这个版本号，把它拼在URL后面（比如/avatars/user123.jpg?v=3）
• 这种方式和你提到的?foo=guid类似，但只有头像更新时才改版本号，平时所有请求用同一个URL，完全不影响缓存效率

3. 刷新Azure CDN缓存（如果用了CDN） #

如果你的Blob存储搭配了Azure CDN，可以主动清除CDN节点上的旧缓存：

• 用Azure CLI命令：az cdn endpoint purge --name <你的CDN端点名> --resource-group <资源组名> --content-paths "/avatars/user123.jpg"
• 或者直接在Azure Portal里手动提交清除请求，CDN节点的旧缓存被清后，浏览器下次请求就会拉取新的头像文件

为啥不直接操作浏览器缓存？ #

浏览器没给网站提供主动清除单个特定文件缓存的API，唯一沾边的caches.delete()只能清Service Worker缓存的资源，还得用户允许Service Worker才行，兼容性和适用范围都有限，远不如上面这些服务端/存储端的方案靠谱。

内容的提问来源于stack exchange，提问作者David Thielen