crossorigin不是开关，必须与服务器CORS响应头配对生效；仅img、script、link（stylesheet/font）、video、audio支持，其他标签无效。
直接说结论：crossorigin 不是“开了就能用”的开关，它必须和服务器返回的 CORS 响应头配对生效；单独加属性，浏览器照样报错。
哪些 HTML 元素支持 crossorigin 属性
只有明确列出的几个元素能用：<img>、<script>、<link>（仅当 rel="stylesheet" 或 rel="preload" 且 as="font" 等场景）、<video>、<audio>。其他标签如 <iframe>、<div> 加了也无效。
常见误用：
- 给
<link rel="icon">加crossorigin—— 浏览器忽略，不触发 CORS 请求 - 给同域
<script>加crossorigin="anonymous"—— 多余，但不会报错；不过会强制走 CORS 模式，可能意外触发预检（罕见） - 在
<img>上用了crossorigin，却没处理 canvas 污染问题 —— 后续调用canvas.toDataURL()仍抛SecurityError
anonymous 和 use-credentials 的实际区别
核心差异不在“要不要发 Cookie”，而在「浏览器怎么验证响应头」和「你能不能读资源内容」：
-
crossorigin="anonymous"：请求头带Origin，服务器必须返回Access-Control-Allow-Origin: *或Access-Control-Allow-Origin: https://your-domain.com；错误堆栈可被window.onerror捕获 -
crossorigin="use-credentials"：请求头带Origin+Credentials，服务器必须返回Access-Control-Allow-Origin: https://your-domain.com（不能是*）+Access-Control-Allow-Credentials: true；否则浏览器直接拒绝加载
注意：crossorigin 不写值（如 <script crossorigin src="...">）等价于 crossorigin="anonymous"，但语义不清晰，建议显式写出。
Webpack 动态加载 JS 时 crossOriginLoading 怎么配
这是前端工程中高频出错点：Webpack 生成的 import() 加载的 chunk 脚本，默认不带 crossorigin，一旦跨域就无法捕获错误、也无法使用 SRI（Subresource Integrity）。
在 webpack.config.js 中配置：
module.exports = {
output: {
publicPath: 'https://cdn.example.com/',
crossOriginLoading: 'anonymous' // 或 'use-credentials'
}
};
效果是生成类似这样的 script 标签：
<script src="https://cdn.example.com/chunk-abc.js" crossorigin="anonymous"></script>
关键提醒：
- 若设为
'use-credentials'，CDN（如 Nginx、S3、OSS）必须返回精确域名的Access-Control-Allow-Origin，且不能省略Access-Control-Allow-Credentials: true - Webpack 5+ 默认不启用此功能，不配就是
false，即无crossorigin属性 —— 这会导致跨域 chunk 报错时只显示Script error.
字体加载失败？大概率是 link + crossorigin 没配对
自定义字体（WOFF2/WOFF）通过 <link rel="stylesheet"> 引入 CSS，再由 CSS 的 @font-face 加载字体文件 —— 这个链路里，**CSS 文件本身和字体文件都要过 CORS**。
正确写法：
<link rel="stylesheet" href="https://fonts.example.com/fonts.css" crossorigin>
然后确保服务器对 fonts.css 和所有它引用的字体 URL 都返回正确的 CORS 头。否则即使 CSS 加载成功，字体仍被拦截，控制台报 Failed to load resource: net::ERR_FAILED 或 Font from origin '...' has been blocked from loading by Cross-Origin Resource Sharing policy。
容易忽略的点：
- 字体文件（如
.woff2）的响应头必须包含Access-Control-Allow-Origin，仅 CSS 文件配了没用 - 部分 CDN 缓存了旧响应头（比如没配 CORS），需清缓存或更新 Cache-Control
- 本地开发用
file://协议打开页面时，crossorigin会被忽略，此时字体可能显示正常，上线后才暴露问题
最稳妥的验证方式：打开 Chrome DevTools → Network → 找到字体请求 → 看 Response Headers 是否含 Access-Control-Allow-Origin，且值匹配当前页面来源。
