crossorigin属性只能填anonymous或use-credentials;anonymous用于不带凭据的跨域请求,use-credentials需服务端配合Access-Control-Allow-Credentials:true,否则失败。

crossorigin 属性该填什么值
它只有两个合法取值:anonymous 和 use-credentials,不能写成 crossorigin="true" 或留空——那样等价于没设,浏览器当普通请求处理,跨域时拿不到错误堆栈或性能指标。
绝大多数静态资源(CDN 上的 JS、字体、图片)用 anonymous 就够了;只有当你明确需要带 Cookie 或认证头(比如内部系统鉴权 API 返回的脚本),才用 use-credentials,且服务端必须响应 Access-Control-Allow-Credentials: true,否则会失败。
<script src="https://cdn.example.com/app.js" crossorigin="anonymous"></script>- 如果用了
use-credentials但服务端没配对应 header,控制台会报Failed to load resource: Origin is not allowed by Access-Control-Allow-Origin - 不设
crossorigin时,error事件里event.filename和event.lineno都是空的,Sentry 或自建监控基本抓不到真实错误位置
为什么 script 加了 crossorigin 还报 CORS 错误
加了属性只是“告诉浏览器:请走 CORS 流程”,不代表一定能过。关键看服务端是否返回了匹配的响应头。
常见漏配项:
立即学习“前端免费学习笔记(深入)”;
- 缺少
Access-Control-Allow-Origin(必须精确匹配或为*;注意*和use-credentials互斥) - 没返回
Access-Control-Allow-Headers(如果前端带了自定义 header) - CDN 缓存了旧响应头,改完配置后要清缓存
- 某些 CDN(如 Cloudflare)默认不透传 CORS header,需在页面规则里显式开启 “CORS Header” 功能
script 的 integrity 和 crossorigin 必须一起用吗
不是必须,但强烈建议一起用。因为 integrity 校验只在 CORS 请求下生效——如果没设 crossorigin,浏览器会降级为普通请求,跳过完整性校验,哪怕 hash 写错了也不会报错。
正确写法:
<script src="https://cdn.example.com/react@18.js"
crossorigin="anonymous"
integrity="sha384-..."></script>
错误写法(没 crossorigin):
<script src="https://cdn.example.com/react@18.js" integrity="sha384-..."></script>
此时即使文件被篡改,浏览器也完全不校验。
动态创建 script 标签时怎么设 crossorigin
不能靠 HTML 字符串拼接,得用 JS 属性赋值:
const script = document.createElement('script');<br>script.src = 'https://cdn.example.com/app.js';<br>script.crossOrigin = 'anonymous'; // 注意是 crossOrigin(驼峰),不是 crossorigin<br>document.head.appendChild(script);
常见坑:
- 写成
script.setAttribute('crossorigin', 'anonymous')也能工作,但不如直接赋值crossOrigin稳定(尤其在某些老版本 Safari 中) - 赋值必须在设置
src之前或之后立即做,不能等到onload里再设——那时请求已经发出了 - 如果脚本是模块(
type="module"),它默认就是 CORS 请求,但依然建议显式写上crossorigin,避免语义模糊
crossorigin 当成“开关”而不是“协议声明”——它不解决跨域问题本身,只让浏览器按 CORS 规则去请求并暴露更多调试信息。服务端配置不到位,光加这个属性只会换来更详细的报错。



















