本文详解 Laravel Sanctum 在非 localhost 环境（如局域网 IP）下无法完成身份验证的原因与解决方案，重点解决 ERR_BLOCKED_BY_CLIENT 错误，助你顺利在手机等移动设备上联调 Vue SPA。
本文详解 laravel sanctum 在非 localhost 环境（如局域网 ip）下无法完成身份验证的原因与解决方案，重点解决 `err_blocked_by_client` 错误，助你顺利在手机等移动设备上联调 vue spa。
在使用 Laravel Sanctum 构建 Vue 单页应用（SPA）时，本地开发常通过 http://127.0.0.1:8080（前端）与 http://127.0.0.1:8000（Laravel 后端）协同工作，一切正常。但一旦切换为局域网 IP（例如 http://192.168.45.23:8080）供手机访问，即使已正确配置 SESSION_DOMAIN、SANCTUM_STATEFUL_DOMAINS 和 CORS，仍频繁出现 net::ERR_BLOCKED_BY_CLIENT —— 这并非 Sanctum 配置错误，而是 Laravel 开发服务器默认绑定策略导致的网络可达性问题。
关键误区在于：php artisan serve 默认仅监听 127.0.0.1（即 localhost），该地址仅接受本机回环请求，其他设备（包括同一局域网内的手机、平板或另一台电脑）根本无法建立 TCP 连接，浏览器甚至不会发出预检请求（OPTIONS），因此 CORS 或 Sanctum 中间件根本无机会执行，直接触发客户端拦截（Chrome 显示 ERR_BLOCKED_BY_CLIENT 实为连接失败的误导提示）。
✅ 正确做法是显式启用外部网络监听：
php artisan serve --host=0.0.0.0 --port=8000
- --host=0.0.0.0 表示监听所有可用网络接口（包括物理网卡），使 192.168.45.23:8000 可被局域网内任意设备访问；
- --port=8000（可选）明确端口，避免与前端冲突；
- 无需修改 APP_URL 或 .env 中的域名逻辑——Sanctum 的 stateful 判定依赖的是实际请求来源的 Host 头，而非 APP_URL。
⚠️ 注意事项：
- ✅ 确保防火墙允许对应端口（如 macOS/Windows 防火墙、Linux ufw）；
- ✅ 手机需与开发机处于同一局域网（Wi-Fi 同一 SSID）；
- ❌ 不要将 --host=0.0.0.0 用于生产环境（存在安全风险）；
- ? 若需 HTTPS（如 iOS Safari 对 Cookie 的严格策略），建议使用 Laravel Valet + ngrok 或 expose，而非自签证书调试；
- ? 配置验证：在手机浏览器中直接访问 http://192.168.45.23:8000/api/user（确保已登录），若返回用户数据，则 Sanctum 状态保持成功。
总结：ERR_BLOCKED_BY_CLIENT 在此场景下本质是「连接被拒绝」，根源在于开发服务器未开放外部访问。修正 php artisan serve 的 host 参数是前提，再配合正确的 Sanctum 域名配置（SANCTUM_STATEFUL_DOMAINS=http://192.168.45.23:8080，不含端口则不写）、CORS 白名单及中间件启用，即可实现跨设备无缝联调。
