支持crossorigin属性的元素有、、、、、;不支持、、等。

哪些 HTML 元素支持 crossorigin 属性
只有带 src 属性、且浏览器会**实际加载并解析响应体内容**的元素,才支持 crossorigin。不是所有标签都能用,常见支持的有:<img>、<script></script>、<link rel="stylesheet">、<video></video>、<audio></audio>、<track></track>。
不支持的包括:<iframe></iframe>(它走的是 X-Frame-Options 或 Content-Security-Policy: frame-ancestors)、<form></form>(提交不受 CORS 控制)、<a></a>(纯导航)。
-
<img crossorigin="anonymous">:允许 JS 读取像素(如用canvas.drawImage()后调用getImageData()) -
<script crossorigin="anonymous"></script>:启用子资源完整性校验(integrity),同时让错误堆栈包含真实文件名而非“Script error.” -
<link crossorigin="anonymous">:仅当 CSS 中含font-face或image-set()等需跨域加载资源时才有意义
crossorigin 的两个取值区别在哪
crossorigin 是布尔属性,但实际有三个逻辑状态:anonymous、use-credentials、不设(即默认匿名请求,但不发 CORS 头)。
关键区别在于浏览器是否在请求头中带上 Origin,以及是否要求服务端返回匹配的 Access-Control-Allow-Origin:
-
crossorigin="anonymous":发请求时带Origin: https://your.site,但不带 Cookie;服务端可返回Access-Control-Allow-Origin: * -
crossorigin="use-credentials":带Origin且带 Cookie(等价于 fetch 的credentials: 'include');此时服务端 **不能** 返回*,必须精确匹配 Origin,比如Access-Control-Allow-Origin: https://your.site - 不写
crossorigin:不触发 CORS 校验,但 JS 无法安全读取响应内容(如 canvas 污染、CSS 字体加载失败静默忽略)
为什么加了 crossorigin 还报错 “CORS header ‘Access-Control-Allow-Origin’ missing”
加了属性只是告诉浏览器:“我要走 CORS 流程”,但最终是否放行,完全取决于服务端是否返回了合法响应头。典型错误场景:
- CDN(如 OSS、OBS、DCDN)没配 CORS 规则,或规则里没包含你当前域名(例如开发时用
http://localhost:3000,但规则只写了https://prod.com) - 服务端返回了
Access-Control-Allow-Origin: *,但前端用了crossorigin="use-credentials"或设置了withCredentials = true - 预检失败:比如
<link crossorigin>加了自定义data-属性导致浏览器发 OPTIONS 请求,而后端没处理 OPTIONS 或没返回Access-Control-Allow-Headers - OSS 控制台配置了 CORS,但 DCDN 缓存了旧响应头——DCDN 出站头会覆盖源站头,需单独在 DCDN 配置响应头
什么时候必须用 crossorigin 而不是靠后端配 CORS
后端配 CORS 是基础,但某些场景下,即使后端已正确返回头,前端仍必须显式声明 crossorigin,否则浏览器不会把响应当作“可信任的跨域资源”:
- 用
<img>加载图片后,想用canvas读取像素数据(否则 canvas 会被标记为“tainted”,toDataURL()报错) - 用
<script></script>加载远程模块(如 ES module 动态导入),且需要调试堆栈定位到原始文件(不加会丢失 source map 和文件名) - 用
<link rel="stylesheet">引入含@font-face的 CSS,而字体文件托管在另一域(部分浏览器要求字体也通过 CORS 加载)
最容易被忽略的一点:这些属性一旦加上,就强制走 CORS 流程——如果服务端没配好,原本能正常显示的图片或脚本,反而会直接失败。所以不是“加了更安全”,而是“加了才合法使用”。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











