Vue axios makes put request to wrong URL - laravel

Question

so I've got this weird problem where if I make a Put request through axios in Vue, it's sending it to the wrong route.
It's part of a simple CRUD through a Laravel APIresource. Get and post work fine.
This is the form:
<form #submit.prevent="editType" method="post" class="mb-4">
<label v-if="user.gender === 'man'" for="single_male">Enkel<input type="checkbox" name="type" :id="single_male" :value="types.single_male" v-model="checkedType" #change="showSaveButton = true"></label>
<label v-if="user.gender === 'vrouw'" for="single_female">Enkel<input type="checkbox" name="type" :id="single_female" :value="types.single_female" v-model="checkedType" #change="showSaveButton = true"></label>
<label v-if="user.gender === 'man'" for="double_male">Dubbel mannen<input type="checkbox" name="type" :id="double_male" :value="types.double_male" v-model="checkedType" #change="showSaveButton = true"></label>
<label v-if="user.gender === 'vrouw'" for="double_female">Dubbel vrouwen<input type="checkbox" name="type" :id="double_female" :value="types.double_female" v-model="checkedType" #change="showSaveButton = true"></label>
<label for="double_mix">Dubbel gemengd<input type="checkbox" name="type" :id="double_mix" :value="types.double_mix" v-model="checkedType" #change="showSaveButton"></label>
<button type="submit" v-if="showSaveButton">Opslaan</button>
</form>
My update function:
public function update(Request $request, $id)
{
$user_id = auth('api')->user()->id;
$type = Type::where('user_id' ,'=', $user_id)->first();
$type->single_male = $request->input('single_male');
$type->single_female = $request->input('single_female');
$type->double_male = $request->input('double_male');
$type->double_female = $request->input('double_female');
$type->double_mix = $request->input('double_mix');
$type->save();
return redirect()->back();
}
my method:
editType() {
let types = this.types;
let data = {
single_male: this.single_male,
single_female: this.single_female,
double_male: this.double_male,
double_female: this.double_female,
double_mix: this.double_mix,
};
axios.put('/types/'+types.id, data)
.then(request => this.successfulEdit(request))
.catch(() => this.failed())
},
successfulEdit() {
alert("Voorkeuren succesvol bijgewerkt!");
}
and my route:
Route::apiresource('types','TypeController');
When I make a put request, I can see in the Developer Tools that it tries to make the request to the current url, which of course gives a 405 method not allowed error.
When I change the axios request to just ('/types', data), it does follow the specified route but of course gives the 405 error too since the put method requires an id. Hardcoding to e.g. '/types/4/' also leads to using the current url.
Am I missing somethng or what's wrong? Thanks in advance guys!

Answer 1

Found the problem. The return redirect()->back(); was the culprit. Thanks y'all!

Answer 2

From Laravel docs. https://laravel.com/docs/5.8/routing
Routes defined in the routes/api.php file are nested within a route
group by the RouteServiceProvider. Within this group, the /api URI
prefix is automatically applied
So try to add /api before your current request URL like
axios.put('/api/types/'+types.id, data)