crossorigin不是跨域开关，仅对<img>、<script>、<link>(rel="stylesheet"或preload+as="font")、<video>、<audio>生效；必须与服务端Access-Control-Allow-Origin响应头配合，否则无效。
crossorigin 不是跨域“开关”，加了它不代表能跨域，也不代表资源一定能用 —— 它只是告诉浏览器：“我要走 CORS 流程”，而是否成功，全看服务端有没有返回匹配的 Access-Control-Allow-Origin 响应头。
哪些标签支持 crossorigin？写错了根本没用
只对这几个标签生效：<img>、<script>、<link>（仅限 rel="stylesheet" 或 rel="preload" 且 as="font" 等场景）、<video>、<audio>。
其他标签加了也白加：<iframe>、<div>、<link rel="icon">、CSS 的 background-image —— 浏览器直接忽略，不发 CORS 请求，也不报错。
常见误操作：
-
<link rel="icon" href="/favicon.ico" crossorigin="anonymous">→ 不触发任何 CORS 行为，favicon 加载逻辑完全不受影响 - 给同域资源加
crossorigin→ 不报错但多余；若服务端没配响应头，反而可能意外触发预检请求（尤其带自定义 header 时）
crossorigin="anonymous" 和 crossorigin="use-credentials" 到底怎么选
核心区别不在“要不要发 Cookie”，而在「浏览器怎么验证响应头」和「你能不能读资源内容」：
立即学习“前端免费学习笔记（深入）”；
-
crossorigin="anonymous"：请求头带Origin，但不带Cookie或认证信息；服务端必须返回Access-Control-Allow-Origin: *或精确匹配源（如https://your-site.com）；这是绝大多数场景的首选 -
crossorigin="use-credentials"：请求头同时带Origin和凭证；服务端必须返回Access-Control-Allow-Origin: https://your-site.com（不能是*）且Access-Control-Allow-Credentials: true；缺一不可，否则浏览器直接拒收响应体 - 只写
crossorigin（无值）等价于anonymous，但语义模糊，建议显式写出
为什么加了 crossorigin 还报 “Tainted canvas” 或 “Script error.”
这不是前端写错了，而是前后端没配对：
-
<img crossorigin="anonymous" src="https://cdn.example.com/photo.jpg">能显示图片，但canvas.drawImage(img, 0, 0)后调toDataURL()报错 → 检查 CDN 是否真返回了Access-Control-Allow-Origin: *（注意：不是只配在 HTML 路径，而是图片资源路径） - 跨域
<script>出错只显示"Script error."→ 即使加了crossorigin，若服务端没返回对应响应头，错误堆栈依然被屏蔽 - 动态创建元素时顺序错：
img.src = url; img.crossOrigin = 'anonymous';→ 无效；必须先设crossOrigin，再赋src - CDN 缓存了旧响应（比如没透传 CORS 头）、或 URL 带 query 参数导致缓存 key 变化 → 实际请求没走新配置
Webpack/Vite 构建时怎么让 chunk 自动带 crossorigin
默认生成的 import() 动态加载脚本或 CSS 不带 crossorigin，部署到 CDN 后错误监控和 SRI（Subresource Integrity）全部失效：
- Webpack：在
webpack.config.js中配output.crossOriginLoading: 'anonymous'（或'use-credentials'），生成的<script>标签会自动带属性 - Vite：需手动 patch 或用插件（如
vite-plugin-crossorigin）；默认不处理动态<link rel="stylesheet">，得自己注入crossorigin -
integrity必须搭配crossorigin才生效：没加crossorigin，即使 hash 正确，浏览器也跳过校验
关键点往往藏在细节里：服务端响应头是否覆盖所有子资源（比如 HLS 的 .m3u8 和 .ts）、file:// 协议下 crossorigin 完全无效、CDN 缓存策略是否透传 header —— 这些地方一漏，前面所有设置都归零。
