iOS Safari真机调试踩坑与HSTS解决方案

AI 总结 · 连续创业者视角（以下内容由 AI 提炼，观点归原作者；读完可不看原文）

记录移动端H5开发中Safari联机调试的5个典型故障及解法：1.局域网IP跨域问题可用二级域名+路由器Hosts解决；2.IOS强制HTTPS跳转(HSTS)需清空Safari网站数据；3.调试工具空白或登录态丢失可通过控制台手动设置Cookie解决；4.页面崩溃可能因打包体积过大(如100MB)，注释PC端代码可大幅瘦身；5.aspect-ratio在button中失效需用div替代。

• 局域网调试跨域：用二级域名(local.paul.
• Safari强制HTTPS：清空Safari设置中该域名的所有网站数据，消除HSTS缓存
• 真机调试登录态失效：在Safari控制台直接设置Cookie并改域名为当前调试域名
• 手机打开页面崩溃：检查JS包体积，注释掉未使用的PC端路由代码可极速瘦身
• aspect-ratio样式陷阱：button元素不支持aspect-ratio，改用div

核心结论

Safari 真机调试 H5 页面，核心痛点在于网络协议限制（HSTS 强制 HTTPS）和设备性能瓶颈（大体积 JS 崩溃）。

解决方案：1. 用二级域名+路由器 Hosts 替代局域网 IP，解决跨域；2. 清空 Safari 网站数据消除 HSTS 缓存；3. 注释 PC 端代码实现物理瘦身；4. button 元素禁用 aspect-ratio，改用 div。

一、网络层：从局域网 IP 升级为二级域名

直接用局域网 IP 调试常遇后端 API 跨域问题。标准解法是建立与生产环境共享根域的二级域名，并在路由器设置 Hosts 指向开发机。

• 做法：若生产域为 paul.me，则开发域设为 local.paul.me，并在路由器 hosts 中强制解析到本机 IP。
• 前提：后端需允许该二级域名的跨域行为。
• 收益：保留原有登录态传递逻辑，避免 Cookie 域不一致导致的认证失效。
• 避坑：若访问失败但 ping 正常，尝试重新连接 Mac 网络后重试。

二、协议层：破解 Safari HSTS 强制跳转

本地 HTTP 服务在 iPhone Safari 中常被强制 307 重定向至 HTTPS，这是 HSTS（HTTP Strict Transport Security）缓存生效所致——此前访问过同根域名（如 paul.me）的 HTTPS，Safari 记住了该策略并延伸至子域。

• 解法：进入 iPhone Safari 设置 → 找到对应域名 → 点击“清除网站数据”（含登录态），重启访问即可。
• 注意：此操作会删除该域名下所有 Cookie 和缓存，调试完成后需重新登录。

三、运行层：解决真机崩溃与登录态丢失

1. 登录态失效
Safari 控制台调试时，手动设置的 Cookie 可能因域名/Path 不匹配而失效。
解法：在控制台执行 document.cookie 设置时，明确指定 domain=local.paul.me 且 path=/，确保后续请求携带正确 Cookie。

2. 页面崩溃闪退
某页面打包体积高达 100MB+，iPhone 13 直接崩溃。根源是 Next.js 路由与 PC 端共享，PC 端代码（含大量未使用逻辑）被全量打包。

• 解法：直接注释掉 PC 端专属路由代码块，利用 Tree Shaking 自动剔除，JS 体积从 100MB 降至 2MB，页面恢复正常。
• 推断：后续应通过 dynamic import 或路由懒加载进一步隔离移动端与 PC 端代码。

四、样式层：button 元素不支持 aspect-ratio

在 button 内部对 div 使用 aspect-ratio: 1/1 会导致元素塌陷，因 button 存在默认 appearance 样式干扰。

• 解法：将外层 button 替换为 div，或移除 button 的默认样式覆盖（如 appearance: auto）。
• 验证：AI 生成代码需谨慎，此类 CSS 兼容性问题必须真机实测。

原文 · 保罗的小宇宙：阅读原文 →