crossorigin属性不是跨域开关，仅在、、（stylesheet/font）、、上生效，必须与服务端access-control-allow-origin等响应头配合才有效；其他标签加了无效。
crossorigin 属性不是跨域开关，它只在特定标签上生效
加了 crossorigin 不代表资源就能跨域加载，浏览器照样报 CORS error。它只是告诉浏览器：“请用 CORS 模式发起请求”，但最终能否成功，完全取决于服务端是否返回匹配的响应头（比如 Access-Control-Allow-Origin）。
只有这些标签支持该属性：<img>、<script></script>、<link>（仅当 rel="stylesheet" 或 rel="preload" 且 as="font" 等场景）、<video></video>、<audio></audio>。其他如 <iframe></iframe>、<div>、<code><link rel="icon"> 加了也无效，浏览器直接忽略。
常见误用包括：
-
<link rel="icon" crossorigin>—— 不触发 CORS 请求，对 favicon 加载无任何影响 -
<script crossorigin src="/local.js"></script>—— 同域脚本加这个没坏处但多余；若服务端没配 CORS 头，反而可能意外触发预检（尤其带自定义 header 时）
为什么 <img> 加了 crossorigin 还是不能用 canvas.toDataURL()
这是最常踩的坑：只加了 crossorigin，却没处理 canvas 污染问题。只要 <img> 是跨域的，且没正确启用 CORS，后续调用 canvas.drawImage() 就会让 canvas 进入“污染”状态，此时所有读取操作（toDataURL()、getImageData()、toBlob()）都会抛 SecurityError。
必须同时满足两个条件：
<img crossorigin="anonymous" src="https://cdn.example.com/photo.jpg?x-oss-process=image/resize,p_40">- 服务端响应中包含
Access-Control-Allow-Origin: https://your-domain.com（或*）
注意：crossorigin="use-credentials" 要求更严，服务端必须返回 Access-Control-Allow-Origin 明确域名 + Access-Control-Allow-Credentials: true，否则直接拒绝加载。
crossorigin="anonymous" 和 crossorigin="use-credentials" 的实际区别
核心不在“要不要发 Cookie”，而在于「浏览器怎么校验响应头」和「你能不能拿到资源内容」：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
crossorigin="anonymous"：请求头带Origin，但不带凭证（Cookie、Authorization 等）；服务端只需返回Access-Control-Allow-Origin: *或精确匹配当前源即可；错误堆栈能被window.onerror捕获 -
crossorigin="use-credentials"：请求头带Origin+ 凭证；服务端必须返回Access-Control-Allow-Origin: https://your-domain.com（不能是*）+Access-Control-Allow-Credentials: true；缺一不可，否则浏览器连资源都不加载
不写值（如 <script crossorigin src="..."></script>）等价于 anonymous，但语义模糊，建议显式写出。
什么时候必须加 crossorigin 才能用 integrity
integrity 属性（子资源完整性校验）和 crossorigin 是强绑定的。浏览器规定：只有启用 CORS 的跨域请求，才允许校验 integrity 值；否则会静默忽略校验，甚至阻止脚本执行。
所以，如果你写了：
<script src="https://cdn.example.com/lib.js" integrity="sha384-xxx" crossorigin="anonymous"></script>
那就没问题；但如果漏掉 crossorigin，哪怕服务端返回了正确的 CORS 头，integrity 也不会生效——这在 CDN 引入第三方库时特别容易被忽略。
额外提醒：字体文件（<link rel="preload" as="font">）和样式表中引用的跨域 @font-face，也必须配 crossorigin，否则字体加载失败，页面显示为默认字体。
