The POST method is not supported for this route. Supported methods: GET, HEAD.",… - laravel

Question

I am having issues while using laravel resourceApi controller along with vue js i am creating and application where i am using vue and laravel i am posting a value to store method of my controller but it is saying the method is not allowded or 405 exception in the response. i need some help i am new to laravel and vue.
Here is my code
**UserController :**
public function store(Request $request)
{
return ['message' => 'i have your data'];
}
**Route:**
Route::apiResources(['user' => 'API\UserController']);
**Vue Code:**
<form #submit.prevent="createUser">
<div class="modal-body">
<div class="form-group">
<input
v-model="form.name"
placeholder="Enter name"
type="text"
name="username"
class="form-control"
:class="{ 'is-invalid': form.errors.has('name') }"
>
<has-error :form="form" field="name"></has-error>
</div>
<div class="form-group">
<input
v-model="form.email"
placeholder="Enter email"
type="email"
name="username"
class="form-control"
:class="{ 'is-invalid': form.errors.has('email') }"
>
<has-error :form="form" field="email"></has-error>
</div>
<div class="form-group">
<textarea
v-model="form.bio"
placeholder="Enter bio"
type="email"
name="username"
class="form-control"
:class="{ 'is-invalid': form.errors.has('bio') }"
/>
<has-error :form="form" field="bio"></has-error>
</div>
<div class="form-group">
<select
v-model="form.type"
placeholder="Enter bio"
name="type"
class="form-control"
:class="{ 'is-invalid': form.errors.has('type') }"
>
<option value>---Select User Role---</option>
<option value="admin">Admin</option>
<option value="user">Standard User</option>
<option value="author">Author</option>
</select>
<has-error :form="form" field="bio"></has-error>
</div>
<div class="form-group">
<input
v-model="form.password"
placeholder="Enter email"
type="password"
name="password"
class="form-control"
:class="{ 'is-invalid': form.errors.has('password') }"
>
<has-error :form="form" field="password"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Create</button>
</div>
</form>
**Vue method :**
createUser() {
this.form.post("api/user");
}
error:

Answer 1

I have tried running your code in my program and all the code you mentioned above seems fine. Since you have not provided the code of createUser method so I think you might have done mistake while calling the api.
Please try the below code once in your axios post route.
methods:{
createUser(){
axios.post('/api/user/store', {
//keep your field here//
}).then(res => {
console.log(res)
}
}
}

Answer 2

Maybe there's an error in your post route in axios. It would be helpful if you show your createUser() method. But I'm guessing you have to do something as such to have your code run.
createUser()
{
axios.post('/api/user/store',{
//your fields and all
})
}

Answer 3

API Resource Routes doesn't Support the function for create and Edit i mean POST or PUT method. apiResource method automatically exclude these two routes(Create and Edit).If you want to store or update something, you may specify another route with its corresponding function or use resource routes rather then API resource route like as,
Route::resource(['user' => 'API\UserController']);
please go through the documentation https://laravel.com/docs/5.8/controllers#restful-partial-resource-routes

Answer 4

axios has a default path so if the get request is "/user" the path will be "http://localhost/client" but if you are making a call from another path "http://localhost/invoice" and the get request is "user" so axios will take the current path as base path "http://localhost/invoice/invoice/user" for this reason you must use "/user".
you can check the documentation: https://github.com/axios/axios#request-method-aliases
createUser(){
axios.post('/api/user',{
/* parameter */
})
}