Laravel 8.54.0 发送Ajax请求POST路由返回404错误如何解决？

你遇到的404是由于Ajax请求的路径和项目实际部署路径不匹配导致的：你的Laravel项目部署在 http://localhost/cms/public/ 子目录下，但Ajax配置的绝对路径 /AjaxReq 会直接请求根域名下的地址 http://localhost/AjaxReq，该地址不存在所以返回404。

解决方案 #

1. 优先使用Laravel路由名称生成动态地址（推荐） #

在Blade模板的Ajax代码中，直接用route()辅助函数渲染正确的请求地址，适配所有部署环境无需手动修改：

$.ajax({
    // 替换原有url配置即可
    url: "{{ route('ajaxReq') }}",
    type: 'POST',
    dataType: 'html',
    // 注意：如果不需要传JSON格式参数，可以删除下面这行配置，避免参数解析异常
    // contentType:'application/json',
    headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    data:
    {
        data1: 'ABC',
        data2: 'DEF'
    },
    error: function() {alert('Error');},
    success: function(response) {
                $('#ajaxResponse').empty();
                $('#ajaxResponse').append(response);
            }
});

如果你的Ajax代码写在独立的JS文件中，无法直接解析Blade语法，可以先在Blade模板中定义全局JS变量：

<script>
window.ajaxRoutes = {
    ajaxReq: "{{ route('ajaxReq') }}"
}
</script>

之后在JS文件中直接调用变量即可：url: window.ajaxRoutes.ajaxReq

2. 临时测试方案 #

可以直接把Ajax的url改为实际全路径，或者去掉开头的斜杠使用相对路径，仅适合本地测试用，部署到线上需要手动修改：

// 全路径写法
url: '/cms/public/AjaxReq'
// 相对路径写法，依赖当前页面的路径层级
url: 'AjaxReq'

额外注意事项 #

• 你当前配置了contentType:'application/json'，但直接传JS对象会导致参数格式不匹配，要么删除这行配置使用默认的表单格式传参，要么把data参数用JSON.stringify()包裹转换为JSON字符串。
• 测试阶段可以在控制器的ajaxReq方法中添加返回值验证请求是否正常，比如：

public function ajaxReq(Request $request)
{
    return response()->json($request->all());
}

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