[Vuejs]-Laravel Vue Axios – Axios DELETE Request becomes GET Request

1👍

Have you tried using a resource controller?
https://laravel.com/docs/5.7/controllers#resource-controllers

Also you should follow the rules of the REST API.
So a get request would be: http://test.test/home?id=6
A delete request would be: http://test.test/home/6

So in axios you want to use parameters when you send the get request to

axios.get('/home', {
    params: {
      id: 6
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });  

But a delete request would go to
http://test.test/home/‘ + id

https://github.com/axios/axios

I believe that because when you change the
DELETE request http://test.test/home/6 to a GET request
Laravel is looking for PUT, PATCH, DELETE
this is why you are getting this error:

Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException

The GET method is not supported for this route. Supported methods: PUT, PATCH, DELETE.

In your index method here:

public function index()
    {
        $id = $request->input('id');
        # DO SOMETHING WITH THIS ID HERE
        return view('view')->with(['data' => 'WHATEVER YOU DID ABOVE']);
    }

Is where you would handle this id parameter to fetch the id of 6.

https://laravel.com/docs/5.7/requests#retrieving-input

OR

You could add this to your controller:

public function show($id)
    {

    }

and than route to it:

Route::get('/{id}', 'HomeController@show')->name('home');

https://laravel.com/docs/4.2/routing#route-parameters

// Have you tried this way of doing the Axios delete?

axios({
  method: 'delete',
  url: '/home/6'
}).then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });  
👤Wojo

Leave a comment