Setting ajax url in external js file in laravel 8

i have a single paged website developed in laravel 8 uploaded on a live server. The site has a contact form which uses ajax to send mail. Am currently having issues with setting the right ajax url. I have checked some solutions online but none have solved the problem.

Below are my routes.

// default
Route::get('/', [AppHttpControllersHomeController::class, 'index'])->name('home');
// contact us
Route::post('contactus', [HomeController::class, 'contactus'])->name('contactus');

On the blade header i have this:

<script>
var base_path = '{{ url('/') }}/';
</script>

Then in the external js file:

$.ajax({
    url: base_path + "/contactus",
    method: 'POST',
    dataType: 'json',
    data: {
        _token: _token,
        mail_name: name,
        mail_email: email,
        mail_subject: subject,
        mail_message: message
    },
    success: function (response) {

        // response true
        if (response.bool == true) {
            alert("Sent")
        }
        else {

            alert("Failed")
        }
    }
});

When i submit the form, it fails. Checking the browser console shows a “Not Found, The requested URL was not found on this server..” error. Any help is appreciated.

Answer

For starters, it looks like :

<script>
    var base_path = '{{ url('/') }}/';
</script>

will generate a URL with a trailing slash at the end.

Then :

    url: base_path + "/contactus",

adds another trailing slash. Does your URL come out as https://www.baseurl.com//contactus by any chance?