Le bouton javascript ajax fonctionne correctement sur http://127.0.0.1 mais obtient une erreur et échoue sur http://localhost:8888/xxx/public

Question

Je travaille avec Laravel 10 php 8.10 et ici le bouton javascript ajax fonctionne bien sur php artisan serve http://127.0.0.1 mais j'obtiens une erreur sur **MAMP PRO** (localhost:8888) (erreur de demande de traitement) et ne fonctionne pas sur l'url http://localhost:8888/xxx/public. Ce qui suit est un extrait de code HTML et JS :

Besoin d'aide pour résoudre ce problème.

**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


**JS**

<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('在处理请求时出错。');
             }
         });
    });
    </script>

Besoin d'aide pour résoudre ce problème.

Answer 1

Votre port MAMP Apache est-il bien défini sur le port 8888 et non sur le port 80 ?

Je l'ai fait plusieurs fois (port 8888 pour les tests, port 80 pour le déploiement) et j'ai conservé les appels Ajax ciblant localhost au lieu de localhost:8888 ou vice versa.

Alternativement, vous devrez peut-être spécifier explicitement le port 8888 dans l'appel Ajax, par exemple :

url: 'http://localhost:8888/admin/update-socialmedia-status'

J'espère que cela vous aidera ?