crossorigin属性不是“解决跨域”的开关，而是声明资源以CORS模式加载：需服务端返回Access-Control-Allow-Origin等响应头才生效；仅img、script、link（stylesheet/font）、video、audio支持；anonymous不带凭据，use-credentials带凭据且要求精确域名和Credentials头。
crossorigin 属性不是用来“解决跨域”的，而是告诉浏览器：这个资源（比如 <script></script>、）**要以 CORS 模式加载**，并决定是否附带凭据（如 cookies）、以及后续能否读取其响应头或错误详情。
为什么加了 crossorigin 还报错 “No 'Access-Control-Allow-Origin'”
因为 crossorigin 只是前端“声明我要走 CORS 流程”，它不改变服务器行为。如果服务端没返回 Access-Control-Allow-Origin 响应头，浏览器照样拦截——而且这次是**资源加载阶段拦截**，不是 fetch 请求失败那种。
- 常见现象：
Failed to load resource: the server responded with a status of 403，但 Network 面板里看不到响应头 - 根本原因：图片服务器（比如 OSS、CDN、静态资源站）没配 CORS 响应头，浏览器在预检或加载时直接拒绝解析响应
- 特别注意：
crossorigin="use-credentials"会强制发送 cookie，此时服务端Access-Control-Allow-Origin**不能用***，必须写死域名，否则浏览器直接拒绝
crossorigin 的三个取值差异和适用场景
crossorigin 是个枚举属性，只有两个合法值（"" 空字符串等价于 "anonymous"），没有 "true" 或其他字符串：
-
crossorigin="anonymous"：发起无凭据的 CORS 请求（不带 cookie、authorization header）。服务端可返回Access-Control-Allow-Origin: * -
crossorigin="use-credentials"：发起带凭据的 CORS 请求（携带 cookie、HTTP 认证信息）。服务端必须返回Access-Control-Allow-Origin: https://yourdomain.com（明确域名）+Access-Control-Allow-Credentials: true - 不写
crossorigin：按普通非 CORS 方式加载（同源直接读，跨源则完全隔离：无法读取img.naturalWidth、无法捕获error事件详情、Canvas drawImage 后无法读像素）
什么时候必须加 crossorigin 才能拿到完整错误或响应信息
只在你需要对跨域资源做**运行时检查或操作**时才需要，不是所有跨域资源都得加：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
ctx.getImageData()→ 必须加，否则报SecurityError -
<script></script>需要在window.onerror捕获具体行列号 → 必须加，否则只报Script error. -
用 JS 动态插入并想监听onload/onerror→ 必须加，否则onerror不触发或无详细信息 - 纯展示型
CDN/OSS 静态资源配 CORS 的关键点
前端加了 crossorigin，后端（CDN、对象存储）必须同步配响应头，否则白加：
- OBS、阿里云 OSS、腾讯云 COS：在 Bucket 级别配置 CORS 规则，
允许的来源建议写具体域名（如https://myapp.com），避免用*+AllowCredentials冲突 - Cloudflare / DCDN：在缓存规则或页面规则中添加响应头，注意预检请求（OPTIONS）也要放行，尤其当请求带自定义 header（如
X-Request-ID）时 - Nginx 静态服务：需显式处理
OPTIONS，且用add_header而非more_set_headers（后者不作用于 204/304 响应） - 重点：
Access-Control-Expose-Headers必须显式列出你想 JS 读取的响应头（如X-RateLimit-Remaining），否则即使服务端返回了，JS 也拿不到
最容易被忽略的是：加了 crossorigin 却没确认资源服务器是否真返回了对应 CORS 头——浏览器不会提示“你加了但服务端没配”，只会静默失败或报泛泛的加载错误。开 Network 面板看响应头，比查文档更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
