我试图从laravel获取数据，但得到一个错误，我不知道如何解决它
下面是我的控制器代码：
class BookInventoryController extends Controller
{
public function index(){
$data = Book::orderBy('title')->get();
return response()->json(['books' => $data]);
}
}下面是api.php和web.php的路由
Route::get('/api/books', [BookInventoryController::class, 'index'])->name('api/books');
Route::view('/', 'index');下面是我的组件中的一段代码，我试图创建一个表，并用来自API的数据填充它
<template>
<div class="m-8 w-7/12 mx-auto">
<table class="min-w-full bg-white border border-gray-200">
<tr class="bg-neutral-700 text-white">
<td class="pl-8 py-3">Title</td>
<td class="pl-8">Author</td>
<td class="pl-8">Publication Year</td>
<td class="pl-8">Publisher</td>
<td class="pl-8">ISBN</td>
</tr>
<tr v-for="book in booksData" :key="book.id" class="border-b dark:border-neutral-300">
<td class="p-5">{{book.title}}</td>
<td class="p-5">{{book.author}}</td>
<td class="p-5">{{book.publication_year}}</td>
<td class="p-5">{{book.publisher}}</td>
<td class="p-5">{{book.isbn}}</td>
</tr>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
booksData: [],
};
},
mounted() {
this.getBooks();
},
methods: {
getBooks(){
axios
.get('/api/books')
.then(response => {this.booksData = response.data.books})
.catch(error => {
console.log('Erroe:', error);
});
}
},
};
</script>404 Not Found（Not Found）404（Not Found）错误：AxiosError {message：'请求失败，状态代码为404'，名称...
2条答案
按热度按时间hlswsv351#
这个错误的发生是因为前端（axios）在localhost上找不到laravel服务，因为它可能在另一个端口上运行。
请尝试以下操作：
1.确保Laravel在8080端口上运行-注意：端口可以是您定义任何端口
1.在axios GET调用中，不直接调用路由，而是添加以下URL：
希望这对你有帮助！
vojdkbi02#
我假设你用npm run serve运行vue项目，用php artisan serve运行laravel项目。这意味着你的vue项目默认运行在8080端口，而laravel项目默认运行在8000端口。
由于vue和laravel运行在不同的端口上，将来可能会在不同的主机上运行。在获取axios请求时，需要指定基本路径。
您的代码：
修正一：
在这里，我使用的laravel是运行在localhost和端口8000，因为你说，它是运行在端口80，你可以尝试写80而不是8000
试着把整条路都写下来。当在“/API/books/”上编写时，axios将在相同的基本路径上请求，而不是仅仅路由“/API/books/”，如果您的vue在
localhost:8080上运行，则axios将请求类似localhost:8080/api/books/的请求