iframe嵌了个页面白屏排查3小时发现是忘了传token

Console 管理后台用 iframe 嵌了审计日志页面。上线后点开——白屏。F12 一看iframe 里的请求全返回 403。URL 直接在新标签页打开正常。嵌在 iframe 里就 403。排查先看请求头。直接打开时GET /api/audit/logs HTTP/1.1 Authorization: Bearer eyJhbG...iframe 里打开时GET /api/audit/logs HTTP/1.1 // 没有 Authorization 头token 没带过去。前端代码是这么写的// ❌ 只给主页面 axios 加了拦截器axios.interceptors.request.use(config{consttokenlocalStorage.getItem(token)config.headers.AuthorizationBearer tokenreturnconfig})iframe 内部的页面是独立上下文localStorage 虽然共享但axios 实例是独立的。主页面注入的拦截器不会作用到 iframe 内部的请求。三种解法方案一URL 传 tokeniframesrc/audit?tokeneyJhbG.../最简单但 token 暴露在 URL 里——浏览器历史记录、服务器日志、Referer 头全能看到。不推荐。方案二postMessage 传递父页面constiframedocument.getElementById(audit-frame)iframe.onload(){iframe.contentWindow.postMessage({type:SET_TOKEN,token:localStorage.getItem(token)},https://console.wuxiannet.com)}iframe 内部window.addEventListener(message,(event){if(event.origin!https://console.wuxiannet.com)returnif(event.data.typeSET_TOKEN){localStorage.setItem(token,event.data.token)// 重新初始化 axios}})安全但时机不好控制——如果 iframe 页面在 postMessage 之前就发请求了第一批请求还是没 token。需要配合加载状态处理。方案三cookie 传递推荐把 token 存在 cookie 而非 localStorage// 登录成功后document.cookietoken${jwt}; path/; Secure; SameSiteNoneaxios 自动带 cookieiframe 里不用写任何代码。但需要后端配合// Spring Security 配置http.cors(cors-{}).csrf(csrf-csrf.disable()).sessionManagement(sm-sm.sessionCreationPolicy(SessionCreationPolicy.STATELESS));// 从 cookie 而非 header 读 token缺点是对跨站请求SameSite有限制需要SameSiteNone; Secure。用了方案二。改动范围最小——只在父页面加 postMessageiframe 内加一个 event listener。token 不暴露在 URL 里也不依赖 cookie 的跨站限制。iframe 不出问题的时候一切正常出问题的时候通常跟这三样东西有关token 传没传、CSP 拦没拦、跨域给没给。下次排查按这个顺序来比瞎猜快。关于作者无羡独立开发者全栈工程师专注 AI 应用与微服务架构。 分类技术复盘 个人博客 — 更多技术文章✨ 开发者福利整理 — 云服务资源汇总 软件工坊 — 我的技术分享 个人门户 — 独立开发作品全集