加 referrerpolicy="no-referrer" 可解决90%小程序图片403问题,但需配合云服务白名单;基础库≥2.10.4才支持,uni-app需手动添加且不可写错属性名。

直接加 referrerpolicy="no-referrer" 就能解决 90% 的小程序图片 403 问题,但必须配对云服务白名单,否则安卓真机必挂。
image 组件加 referrerpolicy="no-referrer" 生效条件
微信小程序基础库 ≥ 2.10.4 才真正支持该属性;低于此版本会静默忽略。uni-app 编译时不会自动注入或转换这个属性,所以必须手动写在 <image></image> 标签里:
<image :src="imgUrl" referrerpolicy="no-referrer"></image>
- 别写成
referrer="no-referrer"(已废弃,无效) - 不能用 CSS 的
background-image实现,该策略不作用于样式层 - 动态绑定
:src时,属性仍需显式保留,不要包裹在 v-if 或条件 class 里导致渲染丢失 - H5 端也会识别该属性,但部分老浏览器兼容性差;若需全端一致,建议只在小程序平台条件编译
阿里云 OSS / 腾讯云 COS 防盗链白名单怎么填才不漏
OSS 和 CDN 的白名单规则不统一,漏一项就导致安卓真机 403 或静默失败:
- OSS 控制台防盗链设置中,必须填完整协议+域名:
https://servicewechat.com(注意 https:// 开头) - CDN(如腾讯云 CDN、又拍云)只认域名格式:
servicewechat.com,且建议加通配符:*.servicewechat.com - 如果用了自定义业务域名(如
shop.yourdomain.com),也要一并加入白名单 - 改完配置后务必点击「保存并发布」——很多平台默认缓存旧规则,不点就不生效
私有 OSS Bucket 图片必须走签名 URL
当 OSS 设置为「私有读」时,<image src=""></image> 这种纯前端加载方式根本无法携带 Authorization 头,唯一合法路径是后端生成带签名的临时 URL:
https://bucket.oss-cn-hangzhou.aliyuncs.com/photo.jpg?OSSAccessKeyId=xxx&Expires=1718632000&Signature=yyy
- 签名三要素缺一不可:
OSSAccessKeyId、Expires、Signature - 签名必须由后端生成,**严禁在前端拼接或暴露
AccessKeySecret** - 有效期建议设为 30–60 分钟:太短会导致滚动加载中图片失效;太长增加密钥泄露风险
- uni-app 中可配合
uni.request先请求后端 API 获取签名 URL,再赋值给imgUrl
安卓真机图片不刷新?别只靠 v-if/v-show
即使防盗链问题已解决,安卓微信 WebView 对 <image></image> 的缓存行为更激进,URL 不变时可能复用旧资源,表现为“图片没更新”:
- 强制刷新可用时间戳参数:
:src="`${imgUrl}?t=${Date.now()}`" - 避免直接赋值覆盖数组项(如
list[0] = newUrl),Vue 响应式检测不到,要用this.$set(list, 0, newUrl)或list.splice(0, 1, newUrl) - 若用对象字段存储 URL,替换整个对象比改字段更可靠:
this.imgData = { ...this.imgData, url: newUrl } - 别依赖
onPullDownRefresh自动触发重绘,要显式调用uni.hideNavigationBarLoading()后再更新数据
最常被忽略的是安卓与 iOS 在 Referer 携带上的差异:安卓常把来源拆成 gh_xxxx.servicewechat.com 这类子域,而你只配了主域,结果拦截照旧。上线前务必用真实安卓机扫码测试 Network 请求头,别信开发者工具模拟。


















