Laravel and VueJs(Vuetify) Error : MethodNotAllowedHttpException - vuetify.js

Question

Everything working fine before I tried to use Laravel API authentication. And now some GET methods give MethodNotAllowedHttpException and say allowed method are POST,HEAD and for post methods it say allowed methods are GET,Head.
Here is my axios request in my Vue component
axios.post('api/save_post?api_token='+api_token, this.post)
.then(response => {
console.log(this.user);
this.success = response.data.message;
this.post.title=" ";
this.post.content=" ";
})
.catch(err=>{
this.error = err
//this.error = 'Error in saving post, please try again'
});
here is my route in routes/api.php
Route::middleware('auth:api')->post('save_post','Api\KnowledgeHubController#index')->name('savePost');
Included this in my welcome.blade.php file
meta name="csrf-token" content="{{ csrf_token() }}">
before meta there is < so that's not an error.
and Controller function is
public function index(Request $request)
{
$response = KnowledgeHub::create([
"title" => $request['title'],
"content" => $request['content'],
"author_id" => $request['author_id'],
]);
if($response)
{
return response()->json(['message'=>'Post published Successfully','response'=>$response],200);
}
return response()->json(['message'=>'Error in publishing post','response'=>$response],400);
}
some of Solutions I tried
1-included csrf token in header means in my main file(welcome.blade.php)
2-try to pass api_token in different ways to axios.post
3-run php artisan route:cache
Here is the result of php artisan route:list
POST | api/save_post | savePost | App\Http\Controllers\Api\KnowledgeHubController#index | api,auth:api

Answer 1

Can you call the route from outside your vue-application?
If you are 100% that everything is correct:
Try adding the following header to your axios-request:
const headers = {
'Content-Type': 'application/json'
}
axios.post('api/save_post?api_token='+api_token, this.post, headers)
.then(response => {
console.log(this.user);
this.success = response.data.message;
this.post.title=" ";
this.post.content=" ";
})
.catch(err=>{
this.error = err
//this.error = 'Error in saving post, please try again'
});
Still not working?
Try accessing the route with a program like POSTMAN
Clear Laravel Cache
php artisan cache:clear
php artisan route:cache

Answer 2

I resolved this issue but some other error exist.
In exception/handler.php i replace render function to handle error.
public function render($request, Exception $exception)
{
//return parent::render($request, $exception);
if($request->expectsJson())
{
return parent::render($request, $exception);
}else{
return response()->json($exception->getMessage(), 400 );
}
}
and in my router.js file when i remove mode:history
and in my web.php when i comment bellow code which were written to solve the refresh problem of vue component(means when i was refresh on browser it gave me 404 error.)
to solve that problem i used that code at the end of web.php file.
Route::get('{any}', function () {
return view('welcome');
})->where('any','.*');
But now that 404 error problem exist.