仅、、、、五类标签支持crossorigin属性；其他标签如、等加了也无效，浏览器直接忽略。
crossorigin 属性本身不决定兼容性，它只触发浏览器是否走 CORS 流程；真正的“兼容”取决于服务端响应头是否匹配、浏览器是否支持该标签、以及你用的资源类型是否在支持列表里。
哪些 HTML 标签加 crossorigin 才有效
只有这五类标签支持 crossorigin 属性，其他一律被浏览器忽略：
<img><script></script><link rel="stylesheet"><video></video><audio></audio>
常见无效场景：
-
<link rel="icon">加了crossorigin→ 浏览器不发 CORS 请求，直接忽略 -
<iframe></iframe>或<div> 加了 → 完全无作用，控制台也不会报错 <li> <code>background-image: url(...)里的 URL → CSS 层面无法声明 CORS，canvas 污染无法解除 - 浏览器必须支持该属性（IE10+、所有现代浏览器都支持，但 IE10/11 对
<video></video>的crossorigin支持不完整） - 请求必须带
Origin请求头 → 这个由浏览器自动加，但前提是crossorigin值合法且标签支持 - 服务端响应必须含
Access-Control-Allow-Origin，且值为*或精确匹配当前源（协议+域名+端口） - ✅ 正确：
const img = new Image(); img.crossOrigin = 'anonymous'; img.src = 'https://cdn.example.com/photo.jpg'; - ❌ 错误：
const img = new Image(); img.src = 'https://cdn.example.com/photo.jpg'; img.crossOrigin = 'anonymous';（此时请求已发出，CORS 不生效） - ❌ 错误：
img.crossOrigin = ''或img.crossOrigin = 'true'→ 浏览器可能按anonymous处理，但语义模糊，部分 CDN 会忽略空值 - Origin 变成
null，服务端几乎不会返回Access-Control-Allow-Origin: null - 即使服务端配了
*，浏览器也不发带Origin的请求，CORS 流程根本没启动 - 结果：图片照常显示，但 canvas 一画就报
SecurityError: The canvas has been tainted by cross-origin data
crossorigin="anonymous" 请求行为和兼容要点
crossorigin="anonymous" 是最常用值，但它不是“万能开关”，实际行为受三方面制约：
注意：如果服务端返回了 Access-Control-Allow-Origin: *，但同时返回了 Vary: Origin，而请求头没带 Origin（比如某些代理或本地测试工具剥离了它），CORS 就会静默失败。
动态创建元素时怎么保证 crossorigin 生效
JS 创建的实例不会继承 HTML 模板里的设置，必须手动赋值，且顺序不能错：
同理，document.createElement('script') 也要显式设 script.crossOrigin = 'anonymous'，否则 window.onerror 拿不到真实错误信息。
file:// 协议下 crossorigin 完全失效
本地双击 HTML 文件打开，或某些 Live Server 未正确设置 Origin 时，crossorigin 会被浏览器降级处理：
必须用真实 HTTP 服务启动页面（如 npx http-server、VS Code Live Server），并确认 Network 面板中该资源响应头确实含合法的 Access-Control-Allow-Origin。
真正卡住兼容性的点，从来不是前端要不要加 crossorigin，而是服务端有没有返回匹配的响应头、资源 URL 是否被缓存策略截断了 CORS 头、以及你用的标签是否真的在支持列表里——这三个地方漏一个，整个链路就断了。
