Vue.js结合Laravel 5.6 API使用DELETE方法时遇404错误求助

我来帮你一步步定位这个404问题，这是前后端API交互里很常见的坑，咱们从最可能的原因开始排查：

• 检查路由前缀重复问题
  Laravel的routes/api.php文件里的路由，默认会被框架自动加上api/前缀（在RouteServiceProvider里配置的）。你现在写的路由是Route::delete('api/people/{id}','nameController@destroy');，这就会导致最终的路由URI变成/api/api/people/{id}，而你的前端请求的是api/people/${id}，自然匹配不上。

  解决方法：把路由改成不带api/前缀的版本：

  Route::delete('people/{id}','nameController@destroy');
  

• 确认前端请求的URL路径正确
  你的fetch代码里用的是api/people/${id}，这是相对路径，如果当前前端页面的URL是类似http://your-frontend.com/xxx，那实际请求的路径会是http://your-frontend.com/xxx/api/people/${id}，这显然不是后端API的地址。

  要改成绝对路径（加上开头的斜杠）：

  removeperson(id){ 
    var app = this 
    fetch(`/api/people/${id}`,{ 
      method: 'delete' 
    }) 
    .then(response=>{ 
      this.fetchnames(); 
    }) 
  }
  

  如果前后端是跨域的，那还要加上完整的后端域名，比如fetch('http://your-backend-domain.com/api/people/${id}', ...)。

• 用Laravel命令验证路由注册情况
  打开终端，在Laravel项目根目录执行：

  php artisan route:list
  

  搜索DELETE方法的路由，看看实际注册的URI是什么。如果看到的是api/api/people/{id}，那就是前缀重复的问题；如果是api/people/{id}，那再核对前端请求的URL是否完全匹配。

• 检查控制器和方法的正确性

  1. 确认nameController存在，并且类名拼写正确（Laravel控制器通常是大驼峰命名，比如NameController，如果你的类名是小写的nameController，可能会因为类名大小写问题找不到）。
  2. 确认destroy方法已经在控制器中正确定义，比如：

     public function destroy($id)
     {
         // 执行删除逻辑
         return response()->json(['status' => 'success'], 200);
     }
     

• 排除CSRF令牌干扰（虽然通常不是404的原因）
  如果你的路由不小心写在了routes/web.php里，那Laravel会要求DELETE请求携带CSRF令牌，这种情况通常会返回419错误，但也可以确认一下：你的路由是在api.php里，而api中间件组默认是禁用CSRF验证的，所以这一步可以作为最后的排查项。

内容的提问来源于stack exchange，提问作者Theodory Faustine