Vue.js中通过Axios从Laravel获取数据时遇404错误求助

问题根源 #

404错误说明请求的/api/books路径在Laravel应用中不存在，大概率是路由配置错误或路由缓存导致的。

修复步骤 #

1. 修正路由定义 #

Laravel的api.php和web.php路由有不同的前缀规则：

• 如果路由写在api.php中：框架会自动给所有路由加上/api前缀，因此路由应改为：

Route::get('/books', [BookInventoryController::class, 'index'])->name('api.books');

此时前端axios请求/api/books就能正确匹配。

• 如果路由写在web.php中：没有自动前缀，可保留原路由定义，但要避免和api.php中的路由冲突：

Route::get('/api/books', [BookInventoryController::class, 'index'])->name('api.books');

2. 清除路由缓存 #

Laravel会缓存路由以提升性能，执行以下命令清除缓存，确保新路由生效：

php artisan route:clear

如果之前运行过php artisan route:cache，这一步必须执行。

3. 验证控制器命名空间 #

确保BookInventoryController的命名空间正确，一般位于App\Http\Controllers下，路由文件顶部要正确引入：

use App\Http\Controllers\BookInventoryController;

Route::get('/books', [BookInventoryController::class, 'index'])->name('api.books');

4. 检查已注册路由 #

运行以下命令查看所有生效的路由，确认/api/books是否在列表中：

php artisan route:list

如果找不到该路由，重新检查路由文件的拼写和位置。

5. 修正前端拼写错误 #

注意到Vue组件中有个拼写错误：console.log('Erroe:', error); 应改为 console.log('Error:', error);，虽然不影响404问题，但修正后能更准确地调试。

额外检查项 #

• 确认Book模型存在且能正常查询数据（可直接测试控制器方法）。
• 查看Laravel日志文件storage/logs/laravel.log，排查是否有其他隐藏错误影响路由注册。

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