crossorigin 不是跨域开关，仅对 <img>、<script>、<link>（rel="stylesheet" 或 rel="preload" 且 as="font"）、<video>、<audio> 有效；需与服务端 Access-Control-Allow-Origin 配对才起作用。
crossorigin 不是跨域开关，加了不等于能用；它只在特定标签上生效，且必须和服务端 Access-Control-Allow-Origin 响应头配对才起作用。
哪些标签支持 crossorigin？写错标签白加
只对这几个标签有效：<img>、<script>、<link>（仅限 rel="stylesheet" 或 rel="preload" 且 as="font"）、<video>、<audio>。
以下写法完全无效，浏览器直接忽略，不发 CORS 请求，也不报错：
<link rel="icon" href="/favicon.ico" crossorigin="anonymous">-
<div style="background-image: url(https://cdn.example.com/bg.jpg)"></div>（CSS 层面不支持） <iframe src="https://example.com/embed"></iframe>
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 必须在 src 之前设
顺序错了就失效——浏览器不会重发请求，CORS 流程根本没启动。
- ✅ 正确：
const img = new Image();<br>img.crossOrigin = 'anonymous'; // 必须先设<br>img.src = 'https://cdn.example.com/photo.jpg';
- ❌ 错误：
const img = new Image();<br>img.src = 'https://cdn.example.com/photo.jpg';<br>img.crossOrigin = 'anonymous'; // 无效
- 同理适用于
new Audio()、document.createElement('video')等
为什么加了 crossorigin 还报 “tainted canvas” 或 “Script error.”
不是前端漏写属性，而是前后端没配对。关键检查点：
- 打开 Network 面板，确认图片/JS 文件响应头里真有
Access-Control-Allow-Origin，且值匹配当前页面源或为* - CDN 或对象存储（S3/OSS/Cloudflare）默认关闭 CORS，需手动配置规则；尤其注意带查询参数的 URL（如
?v=2.1）是否缓存了无 CORS 头的旧响应 - Webpack/Vite 动态
import()的 chunk 默认不带crossorigin，需配置：output.crossOriginLoading = 'anonymous'（Webpack）或build.rollupOptions.output.crossOrigin = 'anonymous'（Vite） -
integrity校验必须搭配crossorigin才生效；没加crossorigin，即使 hash 正确也会跳过校验
最容易被忽略的是：服务端返回的 CORS 头必须作用于资源本身（比如图片 URL），而不是 HTML 页面路径；本地用 file:// 协议打开时，所有跨域请求都会失败，必须走 HTTP 服务。
