单台电脑配置Next.js前端与Laravel后端连接及接口异常排查

• 检查认证流程与Token传递

  • 若使用Laravel Sanctum：确保前端先请求GET /sanctum/csrf-cookie获取CSRF令牌，再发送登录请求；登录成功后，后续请求需在请求头携带Authorization: Bearer {token}，或开启withCredentials确保cookie正确传递。
  • 若使用Passport：确认前端获取的access_token有效，请求头Authorization格式正确，后端路由已应用auth:api中间件。
  • 验证前端是否在登录后正确存储Token，且后续请求未遗漏Token传递。

• 核对HTTP方法与路由匹配

  • 打开Laravel的routes/api.php，检查登录、关注等功能的路由方法（POST/PUT/DELETE）是否与前端请求方法一致，比如前端发POST请求登录，后端路由不能定义为GET。
  • 检查路由参数是否匹配，比如取消关注的路由是DELETE /users/{user}/follow，前端需确保正确传递user参数，路径无拼写错误。

• 验证CSRF与CORS配置

  • CSRF：非GET请求需在请求头携带X-XSRF-TOKEN，值从cookie的XSRF-TOKEN中获取；Laravel的config/sanctum.php里stateful需包含前端域名（如['localhost:3000']）。
  • CORS：修改config/cors.php：
    • allowed_origins设为['http://localhost:3000']（你的Next.js运行端口）
    • allowed_methods设为['*']或明确包含POST, PUT, DELETE
    • supports_credentials设为true
  • 修改后执行php artisan config:clear清除配置缓存。

• 查看错误日志定位问题

  • Laravel端：打开storage/logs/laravel.log，搜索相关请求的错误信息，比如Unauthenticated（未认证）、NotFoundHttpException（路由不存在）、ValidationException（参数验证失败）。
  • 前端端：打开浏览器控制台Network面板，查看失败请求的状态码和响应内容，比如401表示认证失败，422表示参数不符合后端验证规则。

• 检查请求数据格式

  • 确保前端发送JSON格式数据，请求头设置Content-Type: application/json，且数据结构与后端验证规则匹配（比如登录需email和password字段，无拼写错误）。
  • 若Laravel路由不在api分组下，需确保控制器方法使用$request->json()获取请求数据。

• 验证权限与中间件

  • 检查后端控制器对应方法是否应用auth中间件，比如public function follow(Request $request)是否被->middleware('auth')保护。
  • 若使用模型策略（如UserPolicy的follow方法），需确认其正确返回true允许当前用户执行操作。

内容的提问来源于stack exchange，提问作者ritik bisen