详细介绍HTML跨域配置：crossorigin标签属性详解-html教程-PHP中文网

crossorigin不是跨域开关，仅声明资源走cors流程；必须与服务端access-control-allow-origin等响应头配对才生效，否则浏览器在加载阶段拦截并报错。

详细介绍html跨域配置：crossorigin标签属性详解

crossorigin不是跨域开关，加了不等于能用

它只是告诉浏览器：“这个资源要走 CORS 流程”，而不是“请放行跨域”。单独加 crossorigin="anonymous"，服务端没返回 Access-Control-Allow-Origin 响应头，照样报错、照样拦截，控制台可能只显示 Failed to load resource 或直接空白——Network 面板里看不到响应体，因为浏览器在解析前就拒绝了。

常见误判场景：

给 <link rel="icon"> 加 crossorigin → 浏览器完全忽略，不发 CORS 请求
给同域 <script></script> 加 crossorigin="anonymous" → 不报错但多余，且可能意外触发预检（尤其配合自定义 header 时）
CDN 上的图片 URL 带查询参数（如 ?v=2.1），但缓存策略没透传 CORS 头 → 实际请求没返回 Access-Control-Allow-Origin

加 crossorigin 后 canvas 还报 tainted 错误？检查这三步

根本原因不是前端漏写属性，而是服务端没配对，或 JS 动态创建时没赋值。

<img src="https://cdn.example.com/photo.jpg?x-oss-process=image/resize,p_40" crossorigin="anonymous"> 必须写在 src 赋值之前；若用 JS 创建：const img = new Image(); img.crossOrigin = 'anonymous'; img.src = '...';
用 curl 或 Network 面板确认图片响应头含 Access-Control-Allow-Origin: * 或精确域名（如 https://your-site.com）
如果图片来自 S3/OSS/Cloudflare，查文档确认 bucket 或 behavior 是否启用了 CORS 配置；部分 CDN 默认关闭，需手动添加规则

注意：background-image 不支持 crossorigin，CSS 层面无法绕过污染限制。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

script 错误监控失效？90% 是 crossorigin 没配对

没加 crossorigin 的跨域脚本出错时，window.onerror 只收到 "Script error."，行列号全丢。这不是代码 bug，是加载链断在 CORS 协商环节。

静态 <script></script> 标签必须显式写：<script src="https://cdn.example.com/app.js" crossorigin="anonymous"></script>；留空（crossorigin）语义模糊，部分构建工具会忽略
Webpack 项目：在 webpack.config.js 的 output 中设 crossOriginLoading: 'anonymous'，否则 import() 加载的 chunk 不带 crossorigin
Vite 项目：在 vite.config.ts 的 build.rollupOptions.output 中配置 crossOrigin: 'anonymous'，或用插件注入 runtime script 标签属性

验证是否生效：打开 Network 面板，看 JS 请求的 Request Headers 是否含 Origin，Response Headers 是否含匹配的 Access-Control-Allow-Origin。

anonymous 和 use-credentials 怎么选？别乱升级

绝大多数场景只用 anonymous；use-credentials 是特例，不是“更安全”或“更强力”的版本。

crossorigin="anonymous"：请求头带 Origin，不带 Cookie / Authorization；服务端只需返回 Access-Control-Allow-Origin: * 或精确域名
crossorigin="use-credentials"：请求头同时带 Origin 和凭证；服务端必须返回 Access-Control-Allow-Origin: https://your-site.com（不能是 *）+ Access-Control-Allow-Credentials: true
写错值（如 crossorigin="true" 或拼错为 crossOrigin）→ 浏览器按非 CORS 模式处理 → 脚本能加载，但错误堆栈和 canvas 读取仍被屏蔽