crossorigin属性不是cors开关，仅声明资源以cors模式加载，必须与服务端返回的access-control-allow-origin等响应头严格配对才生效；单独添加无效，且仅img、script、link（stylesheet/font）、video、audio支持。
crossorigin属性不是CORS开关，只声明加载方式
加了crossorigin不代表能跨域，它只是告诉浏览器：“这次加载请走CORS流程”——前提是服务端响应头里有匹配的Access-Control-Allow-Origin。如果服务端没返回这个头，浏览器会在加载阶段直接拦截，Network面板里看不到响应体，控制台可能只显示Failed to load resource或空白。
常见误操作包括：
• 给<link rel="icon">加crossorigin→ 浏览器忽略，不发CORS请求
• 在<img>标签里写了crossorigin但没写值（如crossorigin留空）→ 语义模糊，部分构建工具或浏览器行为不一致
• 用JS动态创建Image对象却忘了设img.crossOrigin = 'anonymous'，只写了img.src→ 属性必须在src赋值前设置
哪些HTML标签支持crossorigin，效果各不相同
crossorigin只对特定资源加载行为生效，且用途差异很大：
-
<img>：加了才能用canvas.drawImage()后调ctx.getImageData()，否则报Tainted canvas -
<script></script>：加了才能捕获完整错误堆栈（否则window.onerror只收到"Script error."），也支持integrity校验 -
<link rel="stylesheet">：加了才允许JS读取document.styleSheets[0].cssRules，否则抛SecurityError -
<video></video>、<audio></audio>：加了才能读取videoWidth/videoHeight或调用captureStream() -
<iframe></iframe>、<object></object>、<embed></embed>：不支持crossorigin，它们靠postMessage或Content-Security-Policy: frame-ancestors控制
anonymous和use-credentials怎么选
绝大多数静态资源场景用crossorigin="anonymous"就够了：
- 请求头带
Origin，但不发Cookie、不发HTTP认证头 - 服务端可返回
Access-Control-Allow-Origin: *或精确域名（如https://myapp.com） - 能捕获错误堆栈，支持SRI校验
crossorigin="use-credentials"极少用于<script></script>或<img>：
- 请求头带
Origin+ 凭据（如Cookie） - 服务端**必须**同时返回
Access-Control-Allow-Origin: https://your-domain.com（不能是*）+Access-Control-Allow-Credentials: true - 实际中脚本本身一般不依赖session，强行加反而容易因响应头不全而加载失败
CDN或对象存储上的图片/JS为什么加了crossorigin还是报错
90%的问题出在服务端没配对返回响应头，而不是前端漏写属性：
- 用curl或Network面板确认资源响应头是否含
Access-Control-Allow-Origin（值为*或你的源） - 如果图片来自S3/OSS/Cloudflare，查文档确认bucket或behavior是否启用了CORS规则；部分CDN默认关闭，需手动添加
- CDN缓存了旧响应？检查缓存策略是否透传CORS头（比如URL带
?v=2.1但CDN没把Access-Control-Allow-Origin加入Vary头） - 本地用
file://打开HTML，或Live Server启动但没后端→ 没人返回响应头，crossorigin形同虚设
真正该检查的服务端响应头组合，取决于你前端怎么用：crossorigin="anonymous"对应Access-Control-Allow-Origin；crossorigin="use-credentials"则必须搭配Access-Control-Allow-Credentials: true和精确域名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
