Issue with passing url in Ajax call through Javascript in a Laravel Project

Question

I started learning Laravel a few months ago. First I developed it on my local machine and later tried to move it to my shared dreamhost hosting. While using the ajax calls in the Javascript code in Vue components, I realized that I need to pass full URL for the route. Hence I created a global variable in resources/js/app.js

 window.siteURL = (window.location.host.substr(0,9) == '127.0.0.1') ? "http://127.0.0.1:8000/" : "http://example.com/";   

And I created url in my ajax calls like this:

 $.ajax({
        url: siteURL+'client/notesAjax',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

        method: 'post',

I am not sure if this was a good scheme, but it worked.

A few days ago, I registered a domain and tried to run my Laravel project on my AWS EC2 server. After a few hurdles, my Laravel project started running of my domain. However, I realized that I need to empty siteURL for the server on AWS EC2, hence I updated window.siteURL as

window.siteURL = (window.location.host.substr(0,9) == '127.0.0.1') ? "http://127.0.0.1:8000/" : "";  

However, some of my ajax calls were still not working. For example, I had an ajax call on the client/notes page:

 $.ajax({
      url: siteURL+'client/notesAjax',

But this was failing (everything was still working fine on my local pc and the site running on my shared hosting on Dreamhost. Then I figured out that the url that this call was going to was like this:

http://myawsdomain.ca/client/notes/client/notesAjax

Looks like that as the call is being originated from the client/notes page, it was being prepended to 'client/notesAjax' (siteURL is empty). As a hack, I created an extra route in routes/web.php

Route::post('/client/notesAjax',[clientController::class,'notesAjax'])->name('client.notesAjax');
// on AWS, it looks for the route /client/notes/client/notesAjax (client/notesAjax is called from client/notes page)
Route::post('/client/notes/client/notesAjax',[clientController::class,'notesAjax'])->name('client.notesAjax'); 

I have many other ajax calls that originate from the client/notes page. Using that hack on all those calls may not be appropriate. What is the best way to handle my situation? Thanks.

Answer 1

unless you are putting your application in a sub-folder, you could've have ommited the base URL for all your HTTP request and everything should have worked without any issue moving from one domain to another.

so if your route end-point is something like /client/notesAjax

your http request should also have been like that

$.ajax({
        url: '/client/notesAjax',
        .
        .

another thing you could do is define APP_URL in your .env configuration like APP_URL=https://mydomain.me

then append that value of config variable in your main index file, something like

@php
$config = [
  'baseUrl' => config('app.url'),
];
@endphp

<script>
    window.config = @json($config);
</script>

then use it for all your http request

$.ajax({
        url: `${window.config.baseUrl}/client/notesAjax`,

Answer 2

I changed my ajax call from

$.ajax({
  url: siteURL+'client/notesAjax',

to

$.ajax({
  url: '/client/notesAjax',

and everything started working fine.