Laravel 11 Route not found 404 jQuery

I'm using Laravel 11 and jQuery

I have this error :

Erreur 404: Not Found

{ "message": "The route %7B%7B%20route('columns.all')%20%7D%7D could not be found.", "exception": "Symfony\Component\HttpKernel\Exception\NotFoundHttpException",

Here is the code of my road

Route::post('columns/all', [ColumnController::class, 'getAllColumns'])->name('columns.all');

Here is my js code (jQuery) :

$(document).ready(function () 
{
    alert("ici");
    var routeUrl = "{{ route('columns.all') }}";
    // Fonction Ajax pour charger des données
    function loadData() 
    {
            $.ajax({
            url: routeUrl,
            method: 'POST',
            dataType: 'json', // Indique que la réponse attendue est en JSON
            headers: {
                'X-Requested-With': 'XMLHttpRequest' // Indique qu'il s'agit d'une requête AJAX
            },
            data: {
                _token: $('meta[name="csrf-token"]').attr('content') // Ajout du jeton CSRF pour sécuriser la requête
            },
            success: function (response) 
            {
                console.log(response); // Vérification de la réponse
            
                let select = $('#column_description'); // Supposez que vous avez un <select> avec cet ID
            
                // Vider les options existantes
                select.empty();
            
                // Ajouter une option vide
                select.append('<option value="">Select a column</option>');
            
                // Itérer sur les données et créer une option pour chaque colonne
                response.forEach(function(column) {
                    select.append(`<option value="${column.id}">${column.identifiant}</option>`);
                });
            },
            error: function (error) 
            {
                // Afficher un message d'erreur détaillé dans une alerte
                let errorMessage = `Erreur ${error.status}: ${error.statusText}\n\n${error.responseText}`;
                alert(errorMessage);

                // Affiche également l'erreur complète dans la console pour plus de détails
                console.error('Erreur complète:', error);
            }
        });
    }

    // Appeler loadData() lorsque la page est chargée
    loadData();
});

the alert launches correctly.

this code is in a separate file, but when I put it in my index.php file, the route is found without problem.

Thank you for the help.

1. Pass the Route URL as a JavaScript Variable in the Blade File:

    <script>
        var routeUrl = "{{ route('columns.all') }}";
    </script>

2. Add this routeUrl variable in your jquery ajax function:

     url: routeUrl

It should be work now.