VSCode本地用Live Server运行HTML时图片403，主因是对象存储Referer白名单未包含http://127.0.0.1:5500且未开启“允许空Referer”，同时微信环境Referer常为空或weixin://协议，需配置签名URL或代理绕过Referer鉴权。
VSCode 本地运行 HTML（比如用 Live Server）时图片“防盗链失效”，其实是误解——对象存储的防盗链规则压根没生效，问题出在请求根本没带 Referer，或者带了但被对象存储当成非法来源拦掉了。核心不是“失效”，而是“没按预期工作”。
Live Server 启动后图片 403：Referer 是空的
Live Server 默认以 http://127.0.0.1:5500 为根启动，浏览器从这个地址加载 HTML，再请求同域图片（如 /img/logo.png）时，Referer 是 http://127.0.0.1:5500/xxx.html；但如果你的图片放在 OSS/COS 上，请求的是 https://bucket.example.com/logo.png，这时 Referer 就是 http://127.0.0.1:5500 —— 这个域名肯定不在你对象存储白名单里，直接 403。
更麻烦的是：某些浏览器（尤其 Chrome 新版本）在从 http:// 页面请求 https:// 资源时，会主动清空 Referer，导致对象存储收到的是空 Referer，而你又没在控制台配置“允许空 Referer”，结果还是 403。
- 检查方式：打开 DevTools → Network → 点开图片请求 → 查看 Request Headers → 找
Referer字段值 - 如果值为空或为
http://127.0.0.1:5500，就确认是 Referer 不匹配 - 对象存储控制台中，Referer 白名单必须显式添加
http://127.0.0.1:5500（开发用），不能只写生产域名 - 务必勾选“允许空 Referer”选项（测试阶段），否则本地调试永远过不去
微信分享页图片裂图：Referer 是 weixin:// 或空
微信内置浏览器（X5 内核）加载网页时，Referer 字段极不可靠：有时是 https://mp.weixin.qq.com，有时是 weixin:// 协议（非 HTTP），更多时候干脆为空。对象存储遇到 weixin:// 或空 Referer，只要白名单没开“允许空 Referer”，一律 403。
立即学习“前端免费学习笔记（深入）”；
这不是 bug，是微信客户端的设计限制——它不承诺发送标准 Referer。
- 解决方案不是让微信发 Referer，而是放弃依赖 Referer 鉴权
- 临时办法：对象存储 Referer 白名单加一条
*（仅限测试环境，上线禁用） - 长期方案：改用签名 URL（如 OSS 的
ossUtil sign或 SDK 生成带过期时间的临时链接） - 或者加一层轻量代理（Nginx 或 Cloudflare Workers），把请求头里的
User-Agent或自定义 header 当作判断依据，绕过 Referer
<meta name="referrer"> 能不能救急？
可以，但有副作用。在 HTML 的 <head> 里加：
<meta name="referrer" content="no-referrer" />
这会让所有外链请求都不带 Referer，对象存储如果开了“允许空 Referer”，图片就能加载。但注意：
- 它影响整个页面所有外链请求（包括第三方统计、API、字体等），不只是图片
- 如果你的 API 接口也靠 Referer 做简单校验，可能连带失败
- 不解决根本问题——上线后微信用户仍可能因空 Referer 被拦，只是你提前放行了
- 更稳妥的 content 值是
origin-when-cross-origin：同域发完整 URL，跨域只发域名（如https://yourdomain.com），对对象存储白名单更友好
路径没错却显示裂图：别漏了 CORS 和 crossorigin 属性
如果你在 <img> 标签里写了 crossorigin="anonymous"，而对象存储没配 Access-Control-Allow-Origin: *，浏览器就会静默失败（控制台 Network 面板能看到 0 字节响应 + CORS 错误），图片不显示且无提示。
这种写法常见于后续要读取图片像素（canvas getImageData）的场景，但纯展示完全不需要。
- 先确认是否真需要
crossorigin：如果只是<img src="xxx">展示，删掉该属性 - 如果必须保留，对象存储必须开启 CORS 规则，且
AllowedOrigin至少包含你的域名和http://127.0.0.1:5500 - CORS 配置错误时，对象存储返回的响应头里不会出现
Access-Control-Allow-Origin，这是最直接的判断依据
真正卡住人的地方，往往不是“怎么加白名单”，而是忘了开发环境和微信环境的 Referer 行为完全不同——前者至少还能抓包看到值，后者连抓包都困难。上线前务必用真机微信打开调试，别只信本地 Live Server 的表现。
