crossorigin属性本身不解决跨域问题，仅触发浏览器CORS流程，必须与服务端Access-Control-Allow-Origin等响应头配对生效；仅<img>、<script>、<link rel="stylesheet">、<link rel="preload" as="font">、<video>、<audio>支持，其他标签无效。
加 crossorigin 属性本身不解决跨域问题，它只是告诉浏览器“请按 CORS 规则发起请求”，而是否成功，完全取决于服务端是否返回匹配的 Access-Control-Allow-Origin 响应头——没这个头，前端再怎么加属性都白搭。
哪些 HTML 标签支持 crossorigin？
只对明确列出的几个标签生效：<img>、<script>、<link rel="stylesheet">、<link rel="preload" as="font">、<video>、<audio>。其他如 <iframe>、<div>、<link rel="icon"> 加了也无效，浏览器直接忽略。
常见误用：
-
<link rel="icon" crossorigin>→ 不触发任何 CORS 请求，favicon 加载逻辑完全不变 - 动态创建
new Image()但漏设crossOrigin = 'anonymous'→ 即使页面里静态<img>配对了，JS 创建的实例仍是默认非 CORS 模式 - 给同域资源加
crossorigin="use-credentials"→ 强制走带凭据流程，可能意外触发预检，且服务端若没配响应头，加载直接失败
crossorigin="anonymous" 和 crossorigin="use-credentials" 怎么选？
不是“升级关系”，而是两种互斥的请求模式，选错会导致请求被浏览器直接拦截或 canvas 被污染。
立即学习“前端免费学习笔记（深入）”；
crossorigin="anonymous"（推荐绝大多数场景）：
- 请求头带
Origin，但不发 Cookie、Authorization 等凭据 - 服务端只需返回
Access-Control-Allow-Origin: *或精确匹配当前源（如https://your-site.com） - 能捕获完整错误堆栈，支持
integrity校验
crossorigin="use-credentials"（极少用，仅限必须传 Cookie 的私有资源）：
- 请求头同时带
Origin和凭据（如 Cookie） - 服务端**必须**返回
Access-Control-Allow-Origin: https://your-site.com（不能是*） +Access-Control-Allow-Credentials: true - 若服务端只返回
Access-Control-Allow-Origin: *，浏览器会直接拒绝响应体，连加载都失败
Webpack/Vite 动态 import() 的 chunk 怎么配 crossorigin？
静态 <script> 标签好改，但 import('./module.js') 加载的 chunk 默认不带 crossorigin，线上错误监控收不到堆栈，integrity 也失效。
Webpack（webpack.config.js）：
module.exports = {
output: {
publicPath: 'https://cdn.example.com/',
crossOriginLoading: 'anonymous' // 或 'use-credentials'
}
}
Vite（vite.config.ts）：
export default defineConfig({
build: {
rollupOptions: {
output: {
crossOrigin: 'anonymous'
}
}
}
})
注意：crossOriginLoading / crossOrigin 必须和 CDN 实际返回的响应头严格匹配；若设为 'use-credentials'，CDN（如 Nginx、S3、OSS）必须返回精确域名的 Access-Control-Allow-Origin，且不能省略 Access-Control-Allow-Credentials。
为什么加了 crossorigin 还报 “Tainted canvas” 或 “Script error.”？
根本原因不是前端写错了，而是服务端响应头缺失或不匹配。检查顺序必须是：
- 用浏览器 Network 面板确认图片/脚本请求的 Response Headers 里真有
Access-Control-Allow-Origin - 值是否匹配当前页面源（
http://localhost:3000≠https://myapp.com） - 若用了
crossorigin="use-credentials"，确认响应头同时包含Access-Control-Allow-Credentials: true - CDN 或反向代理是否缓存了无 CORS 头的旧响应（尤其带 query 参数的 URL，如
?v=1.2.3） - file:// 或 Live Server 下测试时，服务端通常不认
Origin: null，这类环境无法验证真实 CORS 行为
最容易被忽略的是：跨域图片能显示 ≠ 能读像素，canvas 污染是静默发生的，出错时才暴露——但此时已无法回溯源头。
