解决阿里云 OSS 图片更新后客户端显示旧图问题的方法

2024-07-20
来源:网络整理

背景:

最近开发一个需求,需要使用静态资源镜像,这些镜像都存储在阿里云OSS上,后来需求变了,需要更新镜像,但是客户端看到的还是之前的镜像。

前提:

最基础的方案当然是更换镜像名,但对于已经上线的业务来说,需要频繁修改镜像名代码再上线,甚至可能涉及到前后端的代码修改,这显然不是最优的解决方案。

假设OSS上已经替换过镜像

问题:

1.直接使用隐身模式,或者请求浏览器缓存和链接访问,图片还是没有变化?

A:该问题一般是由于操作不仔细导致的,请检查图片名称或者链接路径是否一致。

2.访问图片的链接已经改变,但是客户端还是没有更新图片?

答:刷新阿里云CDN控制台的缓存,清除客户端缓存,比如微信开发工具的缓存。

3.控制台刷新缓存后图片还是没有更新?

A:检查客户端使用的镜像路径后面是否有对应的适配参数,如?x-oss-=/,q_90,并在阿里云CDN控制台刷新对应的全路径缓存。

4.图片发生了变化,但是之前访问过的客户端设备(比如手机微信小程序中)上图片还没有更新?

微信小程序清除缓存数据_微信开发者工具清除缓存_微信小程序清除缓存开发

A:你可以删掉微信小程序再查看图片是否有更新,很遗憾,没有。担心的时候,你可能会想,在所有图片后面加一个时间戳,比如 ?time=Date.now(),那么每次都会加载新的图片,这样缓存就没意义了,性能也会有问题。

然后看一下图片请求:Code: 200 OK (from disk),所以问题的关键在于如何清除本地的图片缓存,这就涉及到http协议头的内容了。

我的图片没有设置响应头,所以当响应头中没有设置缓存策略时,小程序会强制缓存我的图片,并且会缓存很长时间。

现在需要去阿里云对象存储OSS设置该资源的HTTP响应头,下面使用OSS浏览器进行演示:

(1)进入相应目录,找到相应文件,右键,选择Set HTTP

(2)设置响应头的-或,注意这里设置的时候需要对应时间格式,否则会提示下面的错误

为日期、ISO-8601或UNIX

在js中,可以在浏览器中调用new Date(20).()来获取ISO-8601时间。

完成以上步骤后,再次打开客户端就可以看到更新后的图片了!

还有其他文章对此进行了更详细的解释,您可以参考:

分享