crossorigin应设anonymous或use-credentials取决于是否需携带凭据：anonymous不发Cookie，适用于公开CDN；use-credentials需服务端精确匹配Origin并返回Access-Control-Allow-Credentials:true。
crossorigin 属性到底该设成 anonymous 还是 use-credentials
取决于你请求的资源是否需要携带凭据（如 Cookie、HTTP 认证头）。设错会导致 401、403 或 CORS 预检失败，且浏览器静默拦截响应体（response.body 为空）。
-
crossorigin="anonymous"：不发 Cookie 和认证头，适用于公开 CDN 资源（如 jQuery、React 生产包），也是最常用配置 -
crossorigin="use-credentials"：显式要求携带凭据，服务端Access-Control-Allow-Origin不能为*，必须精确匹配（如https://a.com），且需返回Access-Control-Allow-Credentials: true - 不加
crossorigin属性：等价于不启用 CORS 检查，但后续若用fetch()读取该资源（比如动态import()或Response.arrayBuffer()），会因“opaque”类型被拒绝解析
script 标签加 crossorigin 后仍报 CORS 错误的常见原因
加了属性只是“发起带 CORS 的请求”，不代表一定能成功。关键看服务端响应头是否合规。
- CDN 返回了
Access-Control-Allow-Origin: *，但你用了crossorigin="use-credentials"→ 必须改为具体域名 +Access-Control-Allow-Credentials: true - 资源实际重定向（如 HTTP → HTTPS、/js/app.js → /js/app.min.js），而重定向后的响应头缺失 CORS 头 → 浏览器以最终响应为准，中间跳转头无效
- 本地开发时通过
file://协议打开 HTML → 所有crossorigin请求均被禁用（Origin 为null），必须走本地服务器（如npx serve） - 使用了
integrity属性但未配crossorigin→ 浏览器强制要求 CORS，否则校验失败并拒绝执行
哪些标签支持 crossorigin 且必须配对使用
不是所有标签加了就生效；只有涉及跨域资源加载并可能被 JS 读取内容的才真正需要。
-
<script crossorigin></script>：必须加，尤其搭配integrity或动态import() -
<link rel="stylesheet" crossorigin>：仅当 CSS 中含url()引用跨域字体或图片，且 JS 后续要读取其内容时才需要（极少见） -
<img crossorigin alt="html实现crossorigin属性配置_html crossorigin anonymous credentials" >：仅当你用canvas.drawImage()绘制后又调用canvas.toDataURL()或getImageData()时才需要，否则可不加 -
<video></video>/<audio></audio>不支持crossorigin属性，需用fetch()+URL.createObjectURL()绕行
fetch() 与 <script> 的 crossorigin 行为差异</script>
两者都受 CORS 约束，但错误表现和调试方式不同。
立即学习“前端免费学习笔记（深入）”；
-
<script crossorigin="anonymous" src="https://cdn.com/lib.js"></script>失败：控制台报Failed to load resource: net::ERR_FAILED，无详细 CORS 提示；检查 Network 面板看响应头是否含Access-Control-Allow-Origin -
fetch("https://cdn.com/data.json", { credentials: "include" })失败：直接抛TypeError: Failed to fetch，且无法读取response.status；必须确保mode: "cors"（默认值）且服务端头正确 - 注意：
credentials: "omit"对应crossorigin="anonymous"，credentials: "include"对应crossorigin="use-credentials"，二者语义严格对齐
最容易被忽略的是：即使资源加载成功（script 执行了、img 显示了），只要没配对好 crossorigin 和服务端头，后续任何尝试读取其原始字节（比如 response.arrayBuffer()、canvas.getImageData()）都会失败，而且错误信息极其模糊——只说“Tainted canvas”或“Opaque response”。这时候得回头核对每一个环节的 CORS 配置，而不是怀疑代码逻辑。
