Laravel项目线上服务器独立JS文件内AJAX无法访问路由404问题咨询

核心原因 #

报错的根本原因有两个：

1. 拉取代码后未更新Laravel路由缓存，线上环境仍使用旧的路由配置
2. 独立JS文件无法解析Blade模板的路径辅助函数，使用的相对路径会随当前页面URL层级变化，本地和线上页面路径层级不一致时就会触发404，这也是AJAX写在Blade文件中能正常运行的原因（Blade会直接渲染出完整绝对路径）。

解决步骤 #

1. 清空Laravel各类缓存 #

在服务器项目根目录依次执行以下命令：

• 清空并重建路由缓存：php artisan route:cache
• 清空并重建配置缓存：php artisan config:cache
• 清空视图缓存：php artisan view:clear
• 清空应用缓存：php artisan cache:clear

执行完成后可运行php artisan route:list，确认invoice_vno_bind路由已经存在于路由列表中。

2. 低改造成本修正AJAX路径规则 #

不需要把所有AJAX代码迁移到Blade文件，只需要做两处修改即可一劳永逸：

1. 在项目公共的Blade布局文件（通常是resources/views/layouts/app.blade.php）的<head>标签内添加全局路径变量：

<script>
// 全局站点根路径，由Blade渲染为实际域名
window.APP_ROOT = "{{ url('/') }}";
</script>

2. 所有独立JS文件中的AJAX请求路径修改为拼接全局根路径的写法，你的请求代码修改后如下：

$.ajax({
    type: "GET",
    url: window.APP_ROOT + "/invoice_vno_bind",               
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data){
        $('#txtVNo').val(data);
    },
    failure: function (response) {
        alert(response.d);
    },
    error: function (response) {
        alert(response.responseText);
    }
});

完成以上操作后问题即可解决。

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