Laravel 11与jQuery路由404求助：独立JS文件路由解析失败

问题根源 #

独立JS文件不会经过Laravel的Blade引擎编译，代码里的{{ route('columns.all') }}会被原封不动当作字符串发送给服务器，编码后就变成了%7B%7B%20route('columns.all')%20%7D%7D，服务器找不到这个路由，因此返回404。而把代码嵌入Blade视图（比如index.blade.php）时，Laravel会先编译模板，将Blade语法替换为实际的URL，所以请求正常。

解决方案 #

方法一：在视图中定义全局变量（推荐）

1. 在你的Blade视图文件中，引入独立JS之前添加script标签，定义全局变量存储路由地址：

<script>
    // 将路由URL挂载到window对象，供JS文件调用
    window.columnAllRoute = "{{ route('columns.all') }}";
</script>
<!-- 引入你的独立JS文件 -->
<script src="/js/your-script.js"></script>

2. 修改独立JS文件，使用全局变量替换原Blade语法：

$(document).ready(function () 
{
    alert("ici");
    var routeUrl = window.columnAllRoute; // 改用全局变量
    // 后续loadData函数保持不变
    function loadData() 
    {
            $.ajax({
            url: routeUrl,
            method: 'POST',
            dataType: 'json',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            data: {
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) 
            {
                console.log(response);
                let select = $('#column_description');
                select.empty();
                select.append('<option value="">Select a column</option>');
                response.forEach(function(column) {
                    select.append(`<option value="${column.id}">${column.identifiant}</option>`);
                });
            },
            error: function (error) 
            {
                let errorMessage = `Erreur ${error.status}: ${error.statusText}\n\n${error.responseText}`;
                alert(errorMessage);
                console.error('Erreur complète:', error);
            }
        });
    }
    loadData();
});

方法二：通过HTML data属性传递路由

1. 在Blade视图的任意元素（比如body标签）上添加data属性：

<body data-columns-all-route="{{ route('columns.all') }}">

2. 在独立JS中读取该属性：

var routeUrl = $('body').data('columns-all-route');

方法三：手动构造URL（不推荐）

直接写死路由路径，但后续如果修改Laravel路由定义，JS文件也需要同步修改，维护性差：

var routeUrl = '/columns/all';

内容的提问来源于stack exchange，提问作者David