uni-app如何解决小程序中图片资源由于防盗链显示失败

幻夢星雲

幻夢星雲

2026-08-03

452人浏览

原创

加referrer-policy="no-referrer"可绕过大部分防盗链:微信小程序image组件显式声明该属性,可阻止发送referer头,避免因servicewechat.com等来源被cdn或云存储拦截;需基础库2.10.4+支持,且图片url必须为https协议。

uni-app如何解决小程序中图片资源由于防盗链显示失败

微信小程序 image 组件加 referrer-policy="no-referrer" 就能绕过大部分防盗链

很多图片 403 报错,根本不是路径或域名配置问题,而是目标服务器启用了 Referer 防盗链。微信小程序默认会带上 servicewechat.com 这类来源信息,某些 CDN 或云存储(如腾讯云 COS、又拍云)会直接拦截。

最轻量的解法就是在 <image></image> 标签里显式声明不发 Referer:

<image src="https://cdn.example.com/photo.jpg" referrer-policy="no-referrer"></image>

注意:referrer-policy 是标准 HTML 属性,在微信小程序基础库 2.10.4+ 已完整支持;低于该版本会忽略此属性,需降级处理。

  • 不要写成 referrer="no-referrer"(这是旧写法,已废弃)
  • 不能用在 background-image 的 CSS 里——CSS 不支持该策略
  • 动态绑定时要确保字符串拼接正确::src="`https://...?t=${Date.now()}`" 后仍需保留该属性

安卓真机白屏?大概率是腾讯云 COS 或阿里云 OSS 的 Referer 白名单没配全

iOS 和安卓在微信环境下的 Referer 行为略有差异:安卓更严格,常把 servicewechat.com 拆成子域(如 gh_xxxx.servicewechat.com),而你只加了主域,导致放行失败。

去云服务商控制台检查防盗链设置,白名单必须包含:

  • servicewechat.com
  • *.servicewechat.com(通配符,更稳妥)
  • 你的正式小程序 AppID 对应的域名(如有自定义业务域名)

配完别忘了「保存并生效」——有些平台需要手动点击「发布配置」,否则缓存仍走旧规则。

uni-app
uni-app

uni-app 官方文档、npm 包和项目创建入口。

下载

私有 OSS Bucket 必须用签名 URL,<image></image> 无法走 header 认证

阿里云 OSS、七牛云等若设为私有读,<image src="..."></image> 这种纯前端加载方式根本没法带 Authorization 头,唯一可行的是生成带签名的临时 URL。

签名必须含三要素:OSSAccessKeyIdExpiresSignature,例如:

https://bucket.oss-cn-hangzhou.aliyuncs.com/photo.jpg?OSSAccessKeyId=xxx&Expires=1718632000&Signature=yyy

关键点:

  • 后端生成,**不能**在前端拼接签名(会暴露 AccessKeySecret
  • 有效期建议设为 30–60 分钟,太长有泄露风险,太短可能导致图片加载中途失效
  • 如果用了 STS 临时凭证,URL 中还需追加 security-token=xxx

代理中转和 weserv.nl 这类第三方服务,慎用在生产环境

https://images.weserv.nl/?url=... 这类免费图床中转服务,开发调试可以快速验证是否为防盗链问题,但上线后不推荐:

  • 响应延迟高,图片加载变慢
  • 服务稳定性无保障,某天挂了就全站图片失效
  • 存在隐私泄露风险——你的原始图片 URL 会暴露给第三方
  • 微信可能对高频调用的中转域名限流或拦截

真正可靠的方案永远是:要么让图片源站配好 Referer 白名单,要么自己搭轻量代理(Node.js + http-proxy-middleware 即可),把请求头清洗干净再转发。

最易被忽略的一点:即使加了 referrer-policy,如果图片 URL 本身是 HTTP 协议,微信小程序会直接拒绝加载——必须确保所有网络图片地址以 https:// 开头

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

1111

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

2285

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

2154

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

2345

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

357

5

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

1145

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

320

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

1039

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

921

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习