Question 219426 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – javascript ajax button is working fine with http://127.0.0.1 but giving error and not working with http://localhost:8888/xxx/public

I am working with laravel 10 php 8.10, Here javascript ajax button is working fine for php artisan serve http://127.0.0.1, while giving error for **MAMP PRO** (localhost:888 Error occurred while processing request.) and not working with url http://localhost:8888/xxx/public Here is the snippet of the html and js

Needed Help to resolve the issue.

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

Needed help to resolve this issue.

Tags:

2

Answers


  1. 0

    Is your MAMP Apache port for localhost definitely set to port 8888 rather than port 80?

    I’ve done that few times (8888 for testing 80 for deployment) and left Ajax calls targeting localhost instead of localhost:8888 or other way around.

    Or, you may have to explicitly target the 8888 in your Ajax call i.e.

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

    Hope that helps?

    Login or Signup to reply.
  2. 0

    when you use MAMP PRO, the server runs on http://localhost:8888, and if your JavaScript code tries to make requests to http://localhost:8888 from a different domain (e.g., http://127.0.0.1:8000), it may encounter a CORS issue.

    To resolve the CORS issue, you can do the following:
    Enable CORS on the server-side
    php artisan make:middleware CorsMiddleware

    <?php

namespace AppHttpMiddleware;

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 = [ AppHttpMiddlewareCorsMiddleware::class, ];

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

// Correct AJAX request $.ajax({
    url: url,
    type: 'GET',
    // Other AJAX settings... });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search