crossorigin属性不是“解决跨域”的开关,而是声明资源以CORS模式加载:需服务端返回Access-Control-Allow-Origin等响应头才生效;仅img、script、link(stylesheet/font)、video、audio支持;anonymous不带凭据,use-credentials带凭据且要求精确域名和Credentials头。
属性不是用来“解决
跨域
”的,而是告诉浏览器:这个资源(比如
、
、
)**要以 CORS 模式加载**,并决定是否附带凭据(如 cookies)、以及后续能否读取其响应头或错误详情。
为什么加了 crossorigin 还报错 “No 'Access-Control-Allow-Origin'”
因为
只是前端“声明我要走 CORS 流程”,它不改变服务器行为。如果服务端没返回
响应头,浏览器照样拦截——而且这次是**资源加载阶段拦截**,不是 fetch 请求失败那种。
常见现象:
加载失败,控制台报
,但 Network 面板里看不到响应头
根本原因:图片服务器(比如 OSS、CDN、静态资源站)没配 CORS 响应头,浏览器在预检或加载时直接拒绝解析响应
特别注意:
会强制发送 cookie,此时服务端
**不能用
**,必须写死域名,否则浏览器直接拒绝
crossorigin 的三个取值差异和适用场景
是个枚举属性,只有两个合法值(
空字符串等价于
),没有
或其他字符串:
:发起无凭据的 CORS 请求(不带 cookie、authorization header)。服务端可返回
:发起带凭据的 CORS 请求(携带 cookie、HTTP 认证信息)。服务端必须返回
(明确域名)+
不写
:按普通非 CORS 方式加载(同源直接读,跨源则完全隔离:无法读取
、无法捕获
事件详情、Canvas drawImage 后无法读像素)
什么时候必须加 crossorigin 才能拿到完整错误或响应信息
只在你需要对跨域资源做**运行时检查或操作**时才需要,不是所有跨域资源都得加:
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
立即学习
“
前端免费学习笔记(深入)
”;
用于 Canvas 绘图后调用
→ 必须加,否则报
需要在
捕获具体行列号 → 必须加,否则只报
用 JS 动态插入并想监听
/
→ 必须加,否则
不触发或无详细信息
纯展示型
→ 不加也行,加了反而可能因服务端没配 CORS 导致加载失败
CDN/OSS 静态资源配 CORS 的关键点
前端加了
,后端(CDN、对象存储)必须同步配响应头,否则白加:
OBS、阿里云 OSS、腾讯云 COS:在 Bucket 级别配置 CORS 规则,
建议写具体域名(如
),避免用
+
冲突
Cloudflare / DCDN:在缓存规则或页面规则中添加响应头,注意预检请求(OPTIONS)也要放行,尤其当请求带自定义 header(如
)时
Nginx 静态服务:需显式处理
,且用
而非
(后者不作用于 204/304 响应)
重点:
必须显式列出你想 JS 读取的响应头(如
),否则即使服务端返回了,JS 也拿不到
最容易被忽略的是:加了
却没确认资源服务器是否真返回了对应 CORS 头——浏览器不会提示“你加了但服务端没配”,只会静默失败或报泛泛的加载错误。开 Network 面板看响应头,比查文档更快定位问题。
crossorigincrossoriginAccess-Control-Allow-OriginFailed to load resource: the server responded with a status of 403crossorigin="use-credentials"Access-Control-Allow-Origin*crossorigin"""anonymous""true"crossorigin="anonymous"Access-Control-Allow-Origin: *crossorigin="use-credentials"Access-Control-Allow-Origin: https://yourdomain.comAccess-Control-Allow-Credentials: truecrossoriginimg.naturalWidtherrorctx.getImageData()SecurityErrorwindow.onerrorScript error.onloadonerroronerrorcrossorigin允许的来源https://myapp.com*AllowCredentialsX-Request-IDOPTIONSadd_headermore_set_headersAccess-Control-Expose-HeadersX-RateLimit-Remainingcrossorigin