Yaşadığım bir sorun için basit bir çözümü paylaşmak istiyorum. Local veya canlı fark etmeksizin bir dizin içerisinde Laravel kullanıyorsanız muhtemelen dizin, kodlarınıza bir şekilde yansıyor ve ortamlar arasında fark oluşmasına neden olabiliyor.

Bu durum için kendimce uygun gördüğüm çözüm, index olarak tanımladığım route ile Axios'a varsayılan (default) olarak baseURL girmek.

Nasıl Uyguluyorum?

Benim için resources/views/layouts/app.blade.php olarak kullandığım ana layout içerisinde aşağıdaki gibi app-base-url meta tag'ını eklemek.

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="app-base-url" content="{{ url('/') }}">

resources/js/bootstrap.js içerisine de aşağıdaki kodu ekliyorum:

let appBaseURL = document.head.querySelector('meta[name="app-base-url"]');

if (appBaseURL) {
    window.axios.defaults.baseURL = appBaseURL.content;
}

Son olarak da Vite / Laravel Mix ile güncel çıktıyı alıyorum ki yaptığımız değişiklikleri aktif olarak görebilelim:

npm run build

İşlem tamamdır, kullanıma geçebiliriz.

Nasıl Kullanıyorum?

Örnek olarak:

  • Proje dizinim: http://localhost/ornek-proje
  • İstek atılması gereken URL: http://localhost/ornek-proje/ornek-endpoint

Hazırlamış olduğumuz ortamda kullanmamız gereken Axios örneği de şu şekilde:

axios.get('/ornek-endpoint')
    .then(response => {
        console.log(response.data);
    });

Başka yazılarda görüşmek üzere, sağlıcakla kalın.