referrerpolicy="no-referrer"必须直接写在img等标签上才生效，不继承、不全局，写错位置、拼写错误（如referrer漏r）、大小写错误或动态绑定均失效；旧版safari≤15.4不支持，需服务端兜底；若图片仍403，多因服务端referer校验拦截，响应头referrer-policy会覆盖该属性（除非设no-referrer）；验证需查network中请求头referer字段是否完全缺失。
referrerpolicy="no-referrer"必须写在![]()
标签上才生效
直接加在标签里就行，不是全局配置，也不继承。写错位置（比如包在
里）或拼写错误（如
替代方案：rel="noreferrer"对更彻底，但对
referrer漏掉一个r）都会失效。
-
referrerpolicy是标准属性名，大小写敏感，不能写成referrerPolicy或referrer-policy - 值必须是字符串字面量：
referrerpolicy="no-referrer"✅，referrerpolicy={policy}（React动态绑定）❌，除非确保 DOM 渲染后该属性已正确写入 - 旧版 Safari（≤15.4）完全不支持，设了也当没设，得靠服务端 Referer 白名单兜底
为什么图片还是 403？常见失效原因
设了no-referrer但图片加载失败，大概率不是前端没写对，而是服务端拦截了——它根本没收到请求，或者收到了但拒绝响应。
- 服务端响应头
Referrer-Policy会全局覆盖单个<img>的设置，除非你设的是no-referrer（它优先级最高） - 如果响应头带
X-Referer-Rejected或403 Forbidden且 body 提示“Referer not allowed”，说明服务端校验失败，前端策略再对也没用 - 图片 URL 本身有重定向（比如 CDN 返回 302），第二跳请求不继承原
referrerpolicy，得在重定向目标页自己再设
怎么确认 no-referrer 真起了作用
不能只看图片是否显示，得查真实请求头。打开 DevTools → Network → 找到对应图片请求 → Headers → Request Headers 区域：
- 看到
Referer:行完全缺失 → 成功 - 看到
Referer: (direct)或空值 → 可能被或响应头覆盖了 - 看到完整 URL（如
https://a.com/path?token=xxx）→ 浏览器版本太低、值拼错、或被中间代理篡改
替代方案：rel="noreferrer"对更彻底，但对![]()
无效
rel="noreferrer"只适用于<a></a>和<iframe></iframe>，对<img>不起作用。想让图片请求彻底不带 Referer，唯一可靠方式就是referrerpolicy="no-referrer"。
- 别用
referrerpolicy="unsafe-url"或"origin"来“试一试”——前者暴露全部路径参数，后者仍发源站，都不等于禁用 - 如果页面同时用了
<meta name="referrer" content="no-referrer">，它会影响所有资源，但可能让百度统计等埋点失效；局部控制更安全 - 真正麻烦的是混合部署：CDN、图床、构建工具各自处理 Referer 的逻辑不同，得一层层查响应头和日志，而不是只改一个属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
