标签不能解决跨域资源请求的referrer传递问题，它仅影响html导航行为，对、等静态资源加载无效，须为每个资源标签显式添加referrerpolicy属性。
<meta name="referrer"> 标签**不能解决跨域资源请求的 referrer 传递问题**——它对 <img>、<script></script>、<link>、<iframe></iframe> 等静态资源加载完全无效，只影响后续由 HTML 自动触发的导航行为（如点击链接、未设策略的 <form></form> 提交）。
为什么 <meta name="referrer"> 在跨域资源加载中失效
浏览器在解析 HTML 时，会**同步发起所有静态资源请求**（比如 <img src="https://cdn.com/a.jpg?x-oss-process=image/resize,p_40">），此时 <meta> 尚未被解析或已忽略。该标签仅在 DOM 构建完成后的「导航类行为」中起作用。
- 常见错误现象：
403 Forbidden（CDN 因 Referer 含完整路径而拒绝）、第三方统计脚本漏埋点、字体加载失败 - 它不控制 JS 发起的
fetch()或XMLHttpRequest，也不影响右键“在新标签页打开” - 即使写了
<meta name="referrer" content="no-referrer">，<script src="https://cdn.com/analytics.js"></script>仍按默认策略发 Referer
真正控制跨域资源 referrer 的写法：referrerpolicy 属性
必须为每个资源标签显式添加 referrerpolicy 属性，且值大小写敏感、拼错即退化为 no-referrer-when-downgrade。
-
<img src="https://cdn.com/photo.jpg?x-oss-process=image/resize,p_40" referrerpolicy="origin">—— 防止图床因 Referer 不匹配 403 -
<script src="https://cdn.com/lib.js" referrerpolicy="strict-origin-when-cross-origin"></script>—— 同域保留路径调试，跨域只发https://a.com -
<link rel="stylesheet" href="https://fonts.googleapis.com/css2" referrerpolicy="no-referrer">—— 字体服务常校验 origin，清空最稳妥 -
<iframe src="https://embed.example.com/widget" referrerpolicy="origin-when-cross-origin"></iframe>—— 控制 iframe 内部 JS 请求的 Referer，不是父页面向它的请求
fetch() 和 XMLHttpRequest 必须靠响应头或调用参数
JS 发起的网络请求完全无视 <meta> 和所有 HTML 属性。Referer 行为由两处决定：
- 后端返回的
Referrer-Policy响应头（优先级最高） - 调用时传参：
fetch(url, { referrerPolicy: "strict-origin-when-cross-origin" }) -
XMLHttpRequest无原生 referrerPolicy 支持，只能靠服务端响应头控制
最容易被忽略的一点：即使你把 <meta name="referrer"> 设得再严，只要没给每个 <img>、<script></script> 加上 referrerpolicy，那些请求就仍在裸奔——尤其是 CDN 图片、字体、统计脚本这类高频跨域资源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
