img标签，同样的src，但是内容产生了变化，如何让缓存更新？
发布于 7 年前 作者 lzszone 5311 次浏览 来自 问答

比如一个用户可以修改自己的头像， 而头像指向一个固定的资源， 这时候用户重新上传了头像，资源路径是不变的， 这种情况如何让浏览器放弃之前的缓存呢？

4 回复
1

参考 http no-cache 服务器返回头信息"Cache-Control: no-cache"

@Lizhooh 好 谢谢

1

比较简单的方法可以是增加一个hash值在图片地址上，eg： ‘http://img.jpg?’ + Math.random()

因为网站用的是express，静态资源也是用的express.static方法，在我的项目中express.static并不能解析带query的url，会出现404，可能与写法有关，但是不管怎样我希望用一个代价不太大的方式来解决这个问题，下面我的解决方法：

/*
express.static(root, [options])接受两个参数，root是serve的路径，可以选择添加options参数
options对象除了可以指定一些静态数值的比如缓存失效时间之外还可以有一个特别的函数参数:setHeader
这个函数接受三个参数：setHeader: function(res, path, stat)
res是express的res对象，可以设置各种http headers
path是当前将会发送的资源的路径
stat是该资源的各种信息：大小，[创建，修改，访问](时间||时间毫秒数)及其他信息
这个函数是同步函数，确保不会造成修改res对象而res已经发送的错误

然后我是使用的Last-Modified(最后修改时间)属性来搞定缓存失效判断的，这个符合我的需求
具有相似功能的有Etag,Expire等HTTP-Header,借助这些可以完成很强大的缓存判断功能
剩下的代码就很简单了：
*/
function headerController(res, path, stat) {
  res.setHeader('Last-Modified', stat.mtime/*modifiedTime(Object Date)*/.toDateString())
}
app.use(path, express.static(pathToDirectory, {setHeader: headerController});

谢谢@Lizhooh @HongYangHT

回到顶部