Laravel 10中AJAX按钮在MAMP PRO环境下失效问题求助

问题说明 #

使用Laravel 10 + PHP 8.1开发的项目，AJAX状态切换按钮在php artisan serve启动的http://127.0.0.1环境下运行正常，但部署到MAMP PRO的http://localhost:8888/xxx/public路径下时，点击按钮会弹出报错“Error occurred while processing request.”，AJAX请求无法正常执行。

相关代码片段 #

HTML代码 #

@if($row->soc_extra==1)
    <a class="updatesocialmediaStatus" id="socialmedia-{{ $row->id }}" socialmedia_id="{{ $row->id }}" href="javascript:void(0)"><i class="fas fa-toggle-on" soc-extra="Active"></i></a>
@else
    <a class="updatesocialmediaStatus" id="page-{{ $row->id }}" socialmedia_id="{{ $row->id }}" style='color:#007bff;' style="color:gray" href="javascript:void(0)"><i class="fas fa-toggle-off" soc-extra="Inactive"></i></a>
@endif
&nbsp;&nbsp;
<a style='color:#007bff;' href="{{ url('admin/social-media/edit/'.$row->id) }}"><i class="fas fa-edit"></i></a>
&nbsp;&nbsp;
<a style='color:#007bff;' class="confirmDelete" name="socialmedia" title="Delete socialmedia" href="javascript:void(0)" record="socialmedia" recordid="{{ $row->id }}" <?php /*href="{{ url('admin/delete-socialmedia/'.$row['id']) }}"*/ ?>><i class="fas fa-trash"></i></a>
&nbsp;&nbsp;
@endforeach

JavaScript代码 #

<script>
    $(document).on("click", ".updatesocialmediaStatus", function(){
        var soc_extra = $(this).children("i").attr("soc-extra");
        var social_media_id = $(this).attr("socialmedia_id");

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: 'post',
            url: '/admin/update-socialmedia-status',
            data: {soc_extra: soc_extra, social_media_id: social_media_id},
            success:function(resp){
                if (resp['status'] == 0) {
                    $("#socialmedia-" + social_media_id).html("<i class='fas fa-toggle-off' style='color:grey' soc-extra='Inactive'></i>");
                } else if (resp['status'] == 1) {
                    $("#socialmedia-" + social_media_id).html("<i class='fas fa-toggle-on' style='color:#007bff' soc-extra='Active'></i>");
                }
             },
             error:function(xhr, textStatus, errorThrown){
                 console.log(xhr.responseText);
                 alert('Error occurred while processing request.');
             }
         });
    });
</script>

问题原因 #

AJAX请求的URL使用了绝对路径/admin/update-socialmedia-status，在MAMP PRO环境下，项目部署在子目录/xxx/public中，浏览器会将这个URL解析为http://localhost:8888/admin/update-socialmedia-status，但实际正确的接口路径应该是http://localhost:8888/xxx/public/admin/update-socialmedia-status，路径不匹配导致请求失败。

解决方法 #

方法一：使用Laravel的url()辅助函数生成完整URL #

在Blade模板的JavaScript中，直接使用url()生成正确的接口路径：

url: "{{ url('/admin/update-socialmedia-status') }}",

这种方法会自动根据当前项目的部署路径生成完整的URL，适配不同环境。

方法二：通过Meta标签传递项目根URL #

1. 在Blade模板的<head>区域添加Meta标签：

<meta name="base-url" content="{{ url('/') }}">

2. 在JavaScript中获取该Meta标签的值并拼接接口路径：

url: $('meta[name="base-url"]').attr('content') + '/admin/update-socialmedia-status',

方法三：给路由命名并使用route()辅助函数 #

1. 在routes/web.php中为目标路由添加名称：

Route::post('/admin/update-socialmedia-status', [SocialMediaController::class, 'updateStatus'])->name('admin.socialmedia.status.update');

2. 在JavaScript中使用route()生成URL：

url: "{{ route('admin.socialmedia.status.update') }}",

这种方法更符合Laravel的路由规范，同时能自动处理路径问题。

额外检查 #

• 确认页面中存在CSRF令牌的Meta标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

确保AJAX请求的Headers中能正确获取到CSRF令牌，避免因权限问题导致请求失败。

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