API routes are not working in Laravel VueJS app

Question

I'm building a SPA with Laravel and Vue. However, I need to make an API call with axios but it's not working.

Here's my web.php:

Route::get('/{any}', function () {
    return view('index');
})->where('any', '.*');

Here's my api.php route:

Route::get('/notification', 'NotificationController@index');

Whenever I make an API call, it shows a blank or broken page.

Could you please give me any suggestion about this issue and solve?

In web.php replace your Route::get('/{any}'... with Route::fallback laravel.com/docs/8.x/routing#fallback-routes — Guru
– Guru, Commented Jun 21, 2021 at 11:10
@Guru But by doing this, I'm getting: UnexpectedValueException: Invalid route action: [App\Http\Controllers\/{any}]. — Nazmul Hossain
– Nazmul Hossain, Commented Jun 21, 2021 at 11:25
You don't need {any} just Route::fallback(function(){return ...}) — Guru
– Guru, Commented Jun 22, 2021 at 12:39

Igor Moraru · Accepted Answer · 2021-06-21 12:45:38Z

2

You should prevent api routes from being captured by web.php route.

First, prefix api routes:

api.php

Route::get('/api/notification', 'NotificationController@index');

Then, exclude prefixed routes from web routes:

web.php

Route::get('/{any}', function () {
    return view('index');
})->where('any', '^(?!api).*$');

answered Jun 21, 2021 at 12:18

Igor Moraru

7,7591 gold badge15 silver badges28 bronze badges

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

2 Comments

Do I need to prefix it with /api in api.php or in web.php?

only api routes in api.php