直接用 iframe 嵌入主流邮箱页面行不通，因服务端返回 x-frame-options: deny 或 content-security-policy: frame-ancestors 'none'，浏览器强制拦截；必须通过官方 oauth api（如 gmail/outlook）配合后端中转鉴权才能获取真实邮件，纯前端无法实现。
为什么直接用 iframe 嵌入邮箱页面行不通
主流邮箱（如 QQ 邮箱、163、Gmail）默认禁止被 iframe 嵌套，会返回 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'，浏览器直接拦截渲染，页面留白或报错 Refused to display 'xxx' in a frame。
这不是前端代码写错，而是服务端主动拒绝嵌入——你改 HTML 或加 allow="..." 属性都没用。
- 别试
<iframe src="https://mail.qq.com"></iframe>，必定失败 - OAuth 登录后拿到的邮箱 API 接口（如腾讯 IMAP/SMTP 或 Outlook Graph API）才是合法入口
- 若只是静态展示“模拟收件箱”，可手写 HTML + JSON 数据 mock，但和真实邮件无关
用 Fetch 调 Gmail 或 Outlook API 的前提条件
要真正拉取真实邮件，必须走官方 API，绕不开认证和权限配置。Gmail 和 Outlook 都要求：
- 在 Google Cloud Console 或 Microsoft Azure 注册应用，获取
client_id和client_secret - 配置 OAuth 2.0 授权域（必须是 HTTPS，且与前端页面域名一致）
- 申请
https://www.googleapis.com/auth/gmail.readonly或Mail.Read权限 - 前端无法直接用
client_secret（会暴露），必须经后端中转鉴权，再由后端调https://gmail.googleapis.com/gmail/v1/users/me/messages
也就是说：纯前端 HTML 页面做不到“连上真实邮箱收件箱”，必须配一个轻量后端（哪怕就一个 index.js + Express）。
用本地 JSON 模拟收件箱最简可行方案
如果目标是教学演示、原型评审或离线预览，直接加载本地 JSON 是最快路径。关键点不是“连邮箱”，而是“像收件箱”。
- 准备一个
mails.json文件，结构类似：[{"id":"1","from":"notify@github.com","subject":"Your PR was merged","time":"2024-05-20T14:22:00Z","preview":"Congrats! ...","read":false}] - HTML 中用
fetch('./mails.json')加载，用map()渲染成<div class="email-item"> 列表 <li>点击某封邮件时，用 <code>dataset.id找对应详情，替换右侧内容区 —— 不需要路由或框架 - 加个
localStorage记录已读状态：localStorage.setItem('read_' + id, '1') - 后端没设响应头
Access-Control-Allow-Origin，导致浏览器拦截fetch请求 - OAuth token 有效期通常 1 小时，用户开着页面不动，后续请求会返回
401 Unauthorized，但前端没监听error或重刷 token - IMAP 协议不能直连浏览器（TCP 层不开放），所有邮件协议交互必须由后端完成，前端只管展示
这样不到 50 行 JS 就能跑起来，适合快速验证 UI 逻辑或交付静态稿。
真实项目里最容易被忽略的 CORS 和 token 过期问题
即使后端搭好了，前端调自家后端接口仍可能卡住，原因往往不在代码本身：
所谓“简易收件箱”，简易的是界面，不是链路。只要涉及真实邮箱数据，认证、代理、错误恢复这三块缺一不可。
