“拒绝连接”实为浏览器拦截，主因是目标页响应头设x-frame-options: deny或content-security-policy: frame-ancestors 'none'，前端无法绕过；同域需调整框架配置，跨域嵌入须依赖代理或官方开放embed接口。
“拒绝连接”不是网络问题，是浏览器明确拦截——90% 情况下，X-Frame-Options 或 Content-Security-Policy 在服务端直接拒绝了嵌入。
为什么控制台报 “Refused to display … because it set ‘X-Frame-Options’ to ‘deny’”
这不是前端 JS 能绕过的错误，而是目标页面响应头里硬性声明的策略。浏览器看到 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'，连请求都不会发出去，直接在控制台报错、iframe 显示空白。
- 同域调试时（比如 Django 本地服务），错误常来自框架默认配置：Django 默认设
X_FRAME_OPTIONS = 'DENY'，需在settings.py改为'SAMEORIGIN'或None - 第三方网站（如银行、支付页）几乎都设
DENY或SAMEORIGIN，这是防点击劫持的标准实践，前端无法解除 -
allow-from uri已被主流浏览器弃用，别依赖它
HTTPS 页面加载 HTTP iframe 触发 Mixed Content 拦截
父页是 https://，但 src 写了 http:// 或协议相对地址 //example.com，Chrome/Firefox 会静默阻止并报 Mixed Content 错误。
- 检查 Network 面板里 iframe 请求是否显示
blocked:mixed-content - 所有
src必须显式写全协议：https://example.com/page.html，不能省略或写http:// - 本地开发用
http://localhost:8080时，iframesrc也必须是http://开头，否则照样被拦
本地双击打开 HTML 文件，iframe 显示 “Not allowed to load local resource”
浏览器禁止 file:// 协议下跨文件加载，哪怕两个 HTML 在同一文件夹也不行——这是安全限制，不是路径写错了。
- 必须起 HTTP 服务：用
python3 -m http.server 8000、npx serve或 VS Code Live Server 插件 - Chrome 启动加
--allow-file-access-from-files是临时调试手段，新版已逐步失效，且不适用于 CI 或真机测试 - 如果子页面也是本地 HTML，确保它通过同一服务访问，例如
src="http://localhost:8000/child.html"
反向代理是唯一能“绕过”X-Frame-Options 的可行方案
当你要嵌入的第三方页面设置了 DENY，又没权限改对方服务端配置时，只能在自己后端加一层代理，把响应头里的 X-Frame-Options 和 Content-Security-Policy 去掉或重写。
- Nginx 示例：在
location块中加proxy_hide_header X-Frame-Options;和add_header Content-Security-Policy "frame-ancestors 'self';"; - 注意：代理后，iframe
src应指向你自己的域名路径（如/proxy/xxx），而非原始 URL - 该方案不解决 HTTPS→HTTP 混合内容，代理服务本身也必须走 HTTPS
真正难处理的从来不是代码怎么写，而是分清哪些失败前端能干预（如协议、本地服务）、哪些必须协调后端（如代理、CSP 配置）、哪些根本无解（如目标站强制 DENY）。别在 onerror 上浪费时间，先看控制台第一行红字报的是什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
