laravel vue SPA page returning HTML instead of json value on ajax request

Question

This is my ajax request from Vue page .

AuthenticationServices.checkEmail(this.userData.email).then(response => {
    console.log(response);
    if (response.data == 1) {
        this.errored = true;
    } else {
        this.errored = false;
        this.successInput = true;
    }
}).catch(error => {
    console.log(error);
});

and this is the code in AuthenticationService.js

checkEmail(email) {
    const url = '/check-email' + '/' + email;
    const headers = {
        'Accept': 'application/json',
        'X-Requested-with': 'XMLHttpRequest'
    }
    return Api.get(url, headers);
}

and this on Api.js

get(url, headers = {}) {
    url = this.prepareUrl(url);
    const options = {
        headers: headers
    }
    return axios.get(url, options);
},
prepareUrl(endpoint) {
    let baseUrl = '127.0.0.1:8000/api';
    return baseUrl + endpoint;
}

and this is my web.php which renders all the pages

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

and in Api.php i have route for checkEmail

Route::get('/check-email/{$email}', 'Frontend\Authentication\AuthenticationController@checkEmail')->name('check-email');

and in controller , i have

public function checkEmail($email)
{
    return response()->json('ok');
}

and when i hit that route . it is returning like this

The response should be 'ok' . i cant figure out the problem ..

Header section

Answer 1

There is a dolar sign in the route where there shouldn't be one.

try changing {$email} to {email}

Answer 2

The header seems to be Ok, so to avoid this add a condition in your web routes :

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

This should tell laravel to use api routes instead.