coop 和 coep 是实现跨域隔离的必需响应头，必须同时设置为 same-origin 和 require-corp，且所有跨域资源需带 crossorigin 属性并返回合法 cors 头，否则 self.crossoriginisolated 为 false。
COOP 和 COEP 是什么，为什么必须一起配
单独设置 Cross-Origin-Opener-Policy（COOP）或 Cross-Origin-Embedder-Policy（COEP）基本无效，浏览器会拒绝启用跨域隔离。COOP 控制当前页面能否被其他源的窗口访问（比如 window.opener），COEP 则控制当前页面能否加载跨域资源（如图片、脚本、iframe）。二者必须同时满足，self.crossOriginIsolated 才为 true，进而允许使用 SharedArrayBuffer、performance.measureMemory 等高权限 API。
如何正确配置 HTTP 响应头
不能靠 HTML 的 <meta> 标签——COOP 和 COEP 只支持 HTTP 响应头，且必须在主文档响应中设置。常见错误是只加在子资源（如 JS/CSS）上，或误用 Content-Security-Policy 混淆。
- 主页面响应头必须包含：
Cross-Origin-Opener-Policy: same-originCross-Origin-Embedder-Policy: require-corp - 所有跨域子资源（如 CDN 上的图片、字体、JS）必须带
crossorigin属性，并返回Access-Control-Allow-Origin: *或明确的源 - 若用
iframe加载同站但不同源（如https://a.example.com嵌https://b.example.com），需确保 iframe 页面也设置了 COOP+COEP，否则主页面crossOriginIsolated仍为false
验证是否生效的三个关键检查点
光看响应头不够，要逐层确认：
- 打开浏览器 DevTools → Application → Frames → 主帧 → Headers → 查看两个 header 是否存在且值正确
- 在 Console 中执行
self.crossOriginIsolated，返回true才算成功 - 如果加载了跨域图片但没加
crossorigin="anonymous"，或该图片响应头缺Access-Control-Allow-Origin，COEP 会直接阻断加载并报错：Failed to load resource: Origin is not allowed by Cross-Origin-Embedder-Policy
常见失败场景和绕不过去的细节
最常卡在“静态资源托管”环节：CDN、图床、字体服务默认不返回 CORS 头。哪怕你主站 header 全对，一张没配 crossorigin 的 <img src="https://cdn.example.com/a.jpg?x-oss-process=image/resize,p_40"> 就会让整个页面失去跨域隔离。
- 第三方脚本（如统计 SDK、广告）若未声明
crossorigin且无 CORS 响应头，必须替换为支持 COEP 的版本，或改用 sandboxed iframe 隔离 -
same-origin是 COOP 最严模式；若需与同站子域通信（如a.example.com↔b.example.com），得用same-origin-allow-popups+ 显式postMessage，但此时crossOriginIsolated仍为false - 本地开发用
file://协议时，COOP/COEP 完全不生效——必须走http://或https://（可用npx serve或 VS Code Live Server）
跨域隔离不是开关式配置，而是一条链路：每个跨域资源都得过 COEP 审查，每个 opener 关系都得过 COOP 审查。漏掉任意一环，crossOriginIsolated 就是 false，后续所有依赖它的功能都会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
