仅、、、、支持crossorigin属性，其他标签加了无效；该属性仅声明cors加载模式，必须与服务端返回的access-control-allow-origin等响应头严格匹配才生效。
哪些媒体标签支持 crossorigin 且必须配服务端响应头
只有 <img>、<script></script>、<link rel="stylesheet">、<video></video>、<audio></audio> 这五类标签支持 crossorigin 属性；其他如 <iframe></iframe>、<link rel="icon">、<div> 加了也无效，浏览器直接忽略。
<p>关键点在于：<code>crossorigin 不是“开关”，它只是告诉浏览器“请走 CORS 流程”，但最终能否成功，完全取决于服务端是否返回匹配的响应头。比如：
-
<img crossorigin="anonymous" src="https://cdn.example.com/photo.jpg?x-oss-process=image/resize,p_40">→ 服务端必须返回Access-Control-Allow-Origin: https://your-site.com或* -
<script crossorigin="anonymous" src="https://cdn.example.com/bundle.js"></script>→ 同样依赖服务端该响应头，否则window.onerror拿不到真实错误信息
没配响应头时，浏览器会在资源加载阶段就拦截（不是 fetch 失败那种），控制台报错类似 Failed to load resource: the server responded with a status of 403，Network 面板里看不到响应体或 CORS 头。
crossorigin="anonymous" 的实际行为和常见误写
crossorigin="anonymous" 表示发起请求时不携带 cookie、HTTP 认证头等用户凭证，仅带 Origin 请求头。这是绝大多数跨域静态资源（CDN 图片、JS、CSS）的默认选择。
容易踩的坑包括：
- 写成
crossorigin="true"或空字符串crossorigin=""：浏览器按anonymous处理，但语义不清，部分 CDN 会忽略空值，导致行为不一致 - 拼写错误：写成
crossOrigin（驼峰）、crossorigin（少一个 n）、cors等 → 属性无效，等同于没加 - 动态创建元素时漏设：用
new Image()或document.createElement('img')时，必须显式赋值img.crossOrigin = 'anonymous'，不能只靠 HTML 模板
注意：crossorigin="anonymous" 允许服务端返回 Access-Control-Allow-Origin: *，但前提是资源不涉及用户凭证——一旦需要登录态（如私有图片），就得换 use-credentials。
canvas / WebGL / AudioContext 场景下为什么必须加
纯展示不加 crossorigin 也能显示图片或播放视频，但只要后续要读取原始内容，就必须加，否则触发“污染”（tainted）机制：
-
<img>绘到<canvas></canvas>后调用toDataURL()或getImageData()→ 报SecurityError: The canvas has been tainted -
<video></video>调用captureStream()或绑定为 WebGL 纹理 → 同样失败 - 音频文件传给
AudioContext.decodeAudioData()→ 拒绝解码
这些操作触发浏览器的“原始内容读取检查”，而检查的前提是资源加载时已声明 CORS 模式。只加属性不配服务端头，或服务端头不匹配（比如域名写错、漏了 Access-Control-Allow-Origin），都会导致污染或加载失败。
Webpack/Vite 动态 import chunk 的 crossorigin 容易被忽略
构建工具生成的代码中，import() 加载的 chunk 默认不带 crossorigin，部署到 CDN 后会出现两个问题：
- 错误堆栈不可见：
window.onerror只收到"Script error."，无法定位线上问题 - SRI（Subresource Integrity）失效：
integrity属性必须与crossorigin配合才校验，否则跳过 hash 校验
配置方式：
- Webpack：在
output.crossOriginLoading = 'anonymous'（或'use-credentials'） - Vite：在
vite.config.ts中设置build.rollupOptions.output.crossOrigin（需插件支持，或手动 patch chunk script 标签）
没配的话，即使你写了 <script crossorigin="anonymous" src="..."></script>，那些由 import() 动态插入的脚本仍无 crossorigin，监控和安全校验形同虚设。
