Home » vue » Axios GET method with Laravel and Vue.JS returning 404 error in javascript console

Axios GET method with Laravel and Vue.JS returning 404 error in javascript console

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’m getting the following error:

GET http://backend.test/test?last_name=DOE 404 (Not Found)

When trying the following GET method:

My GET request in Vue.JS:

    testMethod: _.debounce(async function () {
      await axios.get('test', { params: { last_name: 'DOE' } })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    }, 50),

The route in Laravel:

Route::get('test/{params}', '[email protected]');

The method in my Laravel’s TestController.php (not passed):

    public function filter($params)
    {
        Log::info($params);
    }

What’s wrong with it ?

=== EDIT ===

If I rewrite the route like this:

Route::get('test/{params?}', '[email protected]');

Then I get the following error in Laravel logs:

[2020-04-26 21:28:48] local.ERROR: Too few arguments to function
App\Http\Controllers\TestController::filter(), 0 passed and
exactly 1 expected {“userId”:1,”exception”:”[object] (ArgumentCountError(code: 0): Too few arguments to function
App\Http\Controllers\TestController::filter(), 0 passed and
exactly 1 expected at
/Users/me/code/backend/app/Http/Controllers/TestController.php:10)

Answers:

Since Route::get('test/{params}', '[email protected]'); route expects params to be mandotary; adding ? to params will make it optional.

Route::get('test/{params?}', '[email protected]');

To fetch last_name, it is required to update controller method as following;

use Illuminate\Http\Request;

class TestController
{
    public function index(Request $request)
    {
        $request->get('last_name');
        // actions
    }
}