DELETE 405 (Method Not Allowed) - Laravel with Axios - laravel

Question

Basically i am trying to delete a row using axios, but i keep getting DELETE 405 (Method Not Allowed)
This is my api route for delete:
Route::delete('/vehicles/{id}', [VehiclesController::class, 'destroy']);
In the controller:
public function destroy($id)
{
$vehicleDelete = Vehicle::findOrFail($id);
$vehicleDelete->delete();
return response()->json([
"status" => true
], 200);
}
The button in the front-end:
<button class = 'btn btn-danger' onclick = "deleteBtn(${item.id})">Delete</button>
I tried using console.log to see if the i get the correct id and it does get the correct.
And here is the axios function:
const deleteBtn = (id) => {
axios.delete("api/vehicles/" + id)
.then(response => {
console.log(id);
})
}

Answer 1

After trying out almost everything here is the solution that i randomly came with:
API Route:
Route::delete('/vehicles/{id}', [VehiclesController::class, 'destroy']);
Destroy method in the controller:
public function destroy($id)
{
$vehicle = Vehicle::find($id);
if(!$vehicle) {
return response()->json(["error" => "Vehicle does not exist!!"]);
}
if($vehicle->delete()) {
return response()->json(["success" => "Vehicle deleted!!"]);
}
return response()->json(["error" => "Something bad happened!!"]);
}
front-end button:
<button class = 'btn btn-danger' onclick = "deleteBtn(${item.id})">Delete</button>
And finally, the javascript function:
const deleteBtn = (id) => {
axios.delete(API.url + (API.routes.deleteVehicles.replace("{id}", id)))
.then(response => {
vehicleTable.innerHTML = "";
drawVehicles();
})
}
For reference here is the API object:
const API = {
url: 'http://127.0.0.1:8000/api',
routes: {
getVehicles: '/vehicles',
deleteVehicles: '/vehicles/{id}',
createVehicles: '/vehicles'
}
}