Laravel and VueJs(Vuetify) Error : MethodNotAllowedHttpException

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

mleister · Accepted Answer · 2020-02-26 15:36:42Z

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

answered Feb 26, 2020 at 15:36

mleister

2,7143 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Ahtisham Over a year ago

Thanks for answering. I have already done try these methods but it did not worked.

Muhammad Ahtisham Over a year ago

I also tried const headers = { 'Content-Type': 'application/json', 'Authorization':'Bearer '+api_token }

Muhammad Ahtisham · Accepted Answer · 2020-02-26 16:01:19Z

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.

Collectives™ on Stack Overflow

Laravel and VueJs(Vuetify) Error : MethodNotAllowedHttpException

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related