根本原因是服务端未返回匹配的Access-Control-Allow-Origin响应头；浏览器发起带Origin的CORS请求后，若响应头缺失或不匹配，便静默丢弃资源，导致加载失败。
用 crossorigin 加载跨域图片、脚本、样式表时为什么没效果
根本原因不是前端漏写了属性，而是服务端没返回匹配的响应头。浏览器看到 crossorigin="anonymous"，会发起带 Origin 请求头的 CORS 请求，但只要服务端响应里没有 Access-Control-Allow-Origin（且值匹配当前源或为 *），资源就加载失败，控制台只报 Failed to load resource，Network 面板里看不到响应体。
必须满足以下全部条件才生效：
-
Access-Control-Allow-Origin: https://your-site.com或Access-Control-Allow-Origin: * -
<script crossorigin="anonymous" src="https://cdn.example.com/bundle.js"></script>→ 同样依赖该响应头，否则window.onerror拿不到真实错误堆栈 - 动态创建元素时不能只写 HTML 模板：用
new Image()必须显式设img.crossOrigin = 'anonymous'；用document.createElement('script')也得赋值script.crossOrigin = 'anonymous' - 拼写错误（如
crossOrigin、cors、crossorigin=""）会导致属性被忽略，等同于没加
JSONP 还能用吗？什么场景下必须避开
JSONP 本质是利用 <script></script> 标签不受同源策略限制的特性，通过动态插入带回调函数名的 script 实现数据获取。它现在只适合极少数遗留系统或纯前端调试场景。
明确不能用 JSONP 的情况：
- 需要发
POST、PUT、DELETE请求 —— JSONP 只支持GET - 接口返回非 JSON 数据（如 XML、HTML 片段、二进制）—— JSONP 要求服务端包裹成
callback({...})形式 - 目标接口不支持
callback参数（比如现代 REST API 默认不提供 JSONP 回调机制） - 涉及用户凭证（登录态、Cookie）—— JSONP 无法携带认证信息，且容易被 XSS 利用
如果你控制不了后端，又必须 GET 数据，且对方明确支持 JSONP，那可以临时用；否则优先推动后端配 CORS。
本地双击打开 HTML 文件时图片/JS 加载失败怎么办
这是 file:// 协议触发的严格跨域限制，浏览器直接禁止所有跨域请求（包括 CDN 上的 JS、字体、图片），和线上 HTTP 环境完全不同。
真正可行的解法只有两个：
- 启动本地 HTTP 服务：用
npx http-server或npx live-server启动，然后访问http://localhost:8080/index.html，跨域规则立刻按标准 HTTP 流程走 - 把外部资源离线化：把 CDN 上的 JS/CSS 下载到本地
./lib/目录，改用相对路径引用，彻底规避跨域
不要尝试给 Chrome 加 --allow-file-access-from-files 参数 —— 该参数在新版 Chrome 中已被废弃，且开启后整个浏览器失去安全隔离，风险远大于便利。
直接访问 iframe.contentWindow 会报 Blocked a frame with origin ... from accessing a cross-origin frame，这不是 bug，是浏览器强制保护。唯一合规方式是双方配合使用 postMessage。
关键实操点：
- 主页面发消息前，必须等
iframe.onload触发，否则contentWindow可能为null - 嵌入页收到消息后，**必须校验**
event.origin是否在白名单内（如if (event.origin !== 'https://trusted.com') return;），否则可能被恶意页面伪造 - 传参只能是可序列化对象：不能含函数、
DOM节点、undefined，否则静默丢弃 - 嵌入页主动通知主页面（比如高度变化），要用
parent.postMessage(..., parentOrigin)，其中parentOrigin应来自初始化时收到的消息，不能硬编码*
别碰 document.domain —— 它只适用于主域相同（如 a.example.com 和 b.example.com）的老系统，现代浏览器已逐步弃用，且不适用于完全无关域名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
