使用Next.js与Laravel Breeze时遭遇未处理运行时网络错误求助

• 确认基础配置准确性

  • 检查Laravel后端.env文件，确保APP_URL和FRONTEND_URL（若存在）配置正确，本地开发场景下示例为APP_URL=http://localhost:8000、FRONTEND_URL=http://localhost:3000
  • 验证Next.js端.env.local中的NEXT_PUBLIC_BACKEND_URL指向正确的Laravel服务地址，与后端CORS配置匹配

• 排查CORS跨域问题

  • 查看Laravel的config/cors.php文件，确认allowed_origins包含前端服务地址，比如['http://localhost:3000']，开发环境可临时设为['*']测试
  • 确保allowed_methods覆盖必要请求类型（如['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']），allowed_headers包含Content-Type、X-CSRF-TOKEN等关键头信息

• 定位具体错误细节

  • 打开浏览器控制台的Network标签，找到报错请求，查看Request/Response详情，确认错误状态码（4xx/5xx）或请求地址错误
  • 检查Laravel的storage/logs/laravel.log文件，排查后端是否抛出具体异常，比如路由不存在、认证失败、数据库连接异常等

• 验证认证流程逻辑

  • 确认Laravel的routes/api.php中已正确注册Breeze的API认证路由
  • 检查Next.js端认证代码，比如登录请求是否正确发送至/api/login，是否提前调用/sanctum/csrf-cookie获取CSRF令牌

• 清理缓存与重置依赖

  • 执行Laravel缓存清理命令：php artisan config:clear、php artisan route:clear、php artisan cache:clear
  • 删除Next.js的.next文件夹和node_modules目录，重新运行npm install和npm run dev

• 测试最小化场景

  • 在Laravel后端新增简单测试路由：Route::get('/test', fn() => response()->json(['message' => 'ok']))
  • 在Next.js中用fetch请求该测试地址，排查是否因复杂业务逻辑导致的错误

内容的提问来源于stack exchange，提问作者Geedoo Kanda