javascript ajax 按钮在 http://127.0.0.1 上工作正常，但出现错误并且无法与 http://localhost:8888/xxx/public 一起工作

Question

我正在使用 laravel 10 php 8.10，这里 javascript ajax 按钮对于 php artisanserve http://127.0.0.1 工作正常，同时给出 **MAMP PRO** 错误（localhost:888 处理请求时发生错误.) 并且不使用 url http://localhost:8888/xxx/public 这是 html 和 js 的片段

需要帮助来解决问题。

**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('Error occurred while processing request.');
             }
         });
    });
    </script>

需要帮助来解决此问题。

Answer 1

您的本地主机的 MAMP Apache 端口是否明确设置为端口 8888 而不是端口 80？

我已经这样做了几次（8888 用于测试 80 用于部署），并留下了针对 localhost 的 Ajax 调用，而不是 localhost:8888 或其他方式。

或者，您可能必须在 Ajax 调用中明确定位 8888，即

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

希望有帮助吗？

Answer 2

当您使用 MAMP PRO 时，服务器在 http://localhost:8888 上运行，并且如果您的 JavaScript 代码尝试从不同的域（例如，http://127.0.0.1）向 http://localhost:8888 发出请求。 0.1:8000），可能会遇到CORS问题。

要解决 CORS 问题，您可以执行以下操作： 在服务器端启用 CORS php artisan make：中间件 CorsMiddleware

<?php

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware {
    public function handle($request, Closure $next)
    {
        $response = $next($request);

        $response->header('Access-Control-Allow-Origin', '*');
        $response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
        $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, X-Auth-Token');

        return $response;
    } }

protected $middleware = [ \App\Http\Middleware\CorsMiddleware::class, ];

// Correct URL const url = 'http://localhost:8888/xxx/public/api/some-endpoint';

// Correct AJAX request $.ajax({
    url: url,
    type: 'GET',
    // Other AJAX settings... });