Safari中SPA重定向死循环需用网络检查器捕获302跳转链路，通过状态码过滤、Initiator溯源、Location头分析区分前后端跳转，并清除缓存、无痕测试、禁用扩展验证最小复现。
当你在 Safari 浏览器中访问单页应用（SPA）时，页面反复跳转、地址栏 URL 快速闪烁变化、控制台无报错但始终卡在“Redirecting…”或直接提示“发生了太多重定位”，这通常是前端路由（如 React Router、Vue Router）配置错误导致的死循环重定向，必须通过抓包定位真实跳转链路才能诊断。
启用 Safari 开发者工具并打开网络检查器
网络检查器是唯一能客观记录每次重定向发起方与响应头的原生工具，不启用则无法看到 301/302 跳转链条。该步骤不可跳过，且必须在问题页面加载前完成准备。
1、点击顶部菜单栏的 Safari → 偏好设置 → 高级标签页 → 勾选【在菜单栏中显示‘开发’菜单】。
2、关闭偏好设置，重新打开目标网页（不要刷新）。
立即学习“前端免费学习笔记（深入）”；
3、点击顶部菜单栏的 开发 → 显示网页检查器（或按 Option + Command + I）→ 切换到“网络”标签页。
4、【务必勾选右上角的“保留日志”】，否则每次跳转后请求列表会被清空，你将看不到完整的重定向序列。
捕获并锁定重定向链路
前端路由死循环往往表现为连续多个 302 或 307 响应，且 Location 响应头指向当前已存在的 URL，形成 A→B→A 闭环。仅靠肉眼滚动查找极易遗漏关键跳转节点。
方法一：用状态码过滤快速聚焦
在 Network 面板顶部过滤栏（若未显示，右键列标题 → 勾选“过滤器”）输入：status-code:302 回车。所有临时重定向立即高亮，观察其 Location 值是否构成循环路径。
方法二：用 Initiator 追溯 JS 调用源头
点击任意一个 302 请求 → 查看右侧“Initiator”面板 → 展开调用栈。若显示为 router.js:128 或 vue-router.esm-bundler.js:2345，说明跳转由前端路由库主动触发，而非服务端返回；若显示为 meta http-equiv="refresh"，则问题出在 HTML 模板内嵌逻辑。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
区分前端路由跳转与服务端重定向
第一步：查看响应头中的 Location 字段是否为绝对 URL（含 https://）还是相对路径（如 /login、/dashboard）。前者大概率来自 Nginx/Apache 等服务端配置；后者几乎全部由前端 JavaScript 执行 window.location.replace() 或 history.pushState() 触发。
第二步：禁用 JavaScript 后重试
进入 Safari 偏好设置 → 网站 → JavaScript → 在右侧搜索框输入当前域名 → 将权限设为“拒绝”。刷新页面——如果跳转消失，说明 100% 是前端路由逻辑错误；如果仍跳转，则服务端重定向仍在生效，需同步排查服务器配置。
第三步：检查 History API 调用痕迹
在“控制台”标签页中粘贴执行：history.pushState = new Proxy(history.pushState, {apply: (t, that, args) => {console.log('PUSH:', args[2]); return t.apply(that, args);}}); 回车后刷新页面，所有前端路由跳转将实时打印在控制台，可精准定位哪一行代码在反复触发相同路径。
清除干扰状态并验证最小复现场景
前端路由死循环常依赖 Cookie、LocalStorage 中的登录态或缓存标记，残留数据会掩盖真实问题。
步骤一：清除当前网站全部状态
在 Safari 偏好设置 → 隐私 → 管理网站数据 → 搜索当前域名 → 点击“移除”。
步骤二：开启无痕窗口隔离环境
Command + Shift + N 新建无痕窗口 → 直接访问该 URL，不登录、不操作任何按钮，仅观察初始加载是否自动跳转。若此时仍发生重定向，即可确认是路由初始化逻辑缺陷，与用户态无关。
步骤三：禁用所有扩展排除干扰
进入 Safari 偏好设置 → 扩展 → 取消勾选全部扩展 → 重启 Safari → 再次测试。某些“路由调试助手”类扩展会劫持 history API 并注入额外跳转，造成伪死循环。
