支持crossorigin属性的元素有<img>、<script>、<link rel="stylesheet">、<video>、<audio>、<track>；不支持<iframe>、<form>、等。
哪些 HTML 元素支持 crossorigin 属性
只有带 src 属性、且浏览器会**实际加载并解析响应体内容**的元素，才支持 crossorigin。不是所有标签都能用，常见支持的有：<img>、<script>、<link rel="stylesheet">、<video>、<audio>、<track>。
不支持的包括：<iframe>（它走的是 X-Frame-Options 或 Content-Security-Policy: frame-ancestors）、<form>（提交不受 CORS 控制）、<a>（纯导航）。
-
<img crossorigin="anonymous">：允许 JS 读取像素（如用canvas.drawImage()后调用getImageData()） -
<script crossorigin="anonymous">：启用子资源完整性校验（integrity），同时让错误堆栈包含真实文件名而非“Script error.” -
<link crossorigin="anonymous">：仅当 CSS 中含font-face或image-set()等需跨域加载资源时才有意义
crossorigin 的两个取值区别在哪
crossorigin 是布尔属性，但实际有三个逻辑状态：anonymous、use-credentials、不设（即默认匿名请求，但不发 CORS 头）。
关键区别在于浏览器是否在请求头中带上 Origin，以及是否要求服务端返回匹配的 Access-Control-Allow-Origin：
立即学习“前端免费学习笔记（深入）”；
-
crossorigin="anonymous"：发请求时带Origin: https://your.site，但不带 Cookie；服务端可返回Access-Control-Allow-Origin: * -
crossorigin="use-credentials"：带Origin且带 Cookie（等价于 fetch 的credentials: 'include'）；此时服务端 **不能** 返回*，必须精确匹配 Origin，比如Access-Control-Allow-Origin: https://your.site - 不写
crossorigin：不触发 CORS 校验，但 JS 无法安全读取响应内容（如 canvas 污染、CSS 字体加载失败静默忽略）
为什么加了 crossorigin 还报错 “CORS header ‘Access-Control-Allow-Origin’ missing”
加了属性只是告诉浏览器：“我要走 CORS 流程”，但最终是否放行，完全取决于服务端是否返回了合法响应头。典型错误场景：
- CDN（如 OSS、OBS、DCDN）没配 CORS 规则，或规则里没包含你当前域名（例如开发时用
http://localhost:3000，但规则只写了https://prod.com） - 服务端返回了
Access-Control-Allow-Origin: *，但前端用了crossorigin="use-credentials"或设置了withCredentials = true - 预检失败：比如
<link crossorigin>加了自定义data-属性导致浏览器发 OPTIONS 请求，而后端没处理 OPTIONS 或没返回Access-Control-Allow-Headers - OSS 控制台配置了 CORS，但 DCDN 缓存了旧响应头——DCDN 出站头会覆盖源站头，需单独在 DCDN 配置响应头
什么时候必须用 crossorigin 而不是靠后端配 CORS
后端配 CORS 是基础，但某些场景下，即使后端已正确返回头，前端仍必须显式声明 crossorigin，否则浏览器不会把响应当作“可信任的跨域资源”：
- 用
<img>加载图片后，想用canvas读取像素数据（否则 canvas 会被标记为“tainted”，toDataURL()报错） - 用
<script>加载远程模块（如 ES module 动态导入），且需要调试堆栈定位到原始文件（不加会丢失 source map 和文件名） - 用
<link rel="stylesheet">引入含@font-face的 CSS，而字体文件托管在另一域（部分浏览器要求字体也通过 CORS 加载）
最容易被忽略的一点：这些属性一旦加上，就强制走 CORS 流程——如果服务端没配好，原本能正常显示的图片或脚本，反而会直接失败。所以不是“加了更安全”，而是“加了才合法使用”。
