0

I just came across a very strange behavior of jQuery with Laravel API backend. Don't worry, not the normal issue of authentication etc. Two Scenarios

1: No output with jQuery

public function index(Request $request)
    {   
        $items = $this->repository->get();
        return response()->json(["data" => $items]);
    }

Their is no output

2: Output with jQuery

public function index(Request $request)
    {   
        $items = $this->repository->get();
        echo ".";
        return response()->json(["data" => $items]);
    }

Their is the output complete including the dot in front.

jQuery Call:

 $.ajax({
    url: url,
    type: 'GET',
    async: false, // tested with and without
    cache: false, // tested with and without
    ontentType: 'application/json', // tested with and without
    beforeSend: function beforeSend(xhr) {
      xhr.setRequestHeader('Authorization', 'Bearer ' + token);
    },
    dataType: 'text', //json
    success: function success(data) {
      debugger;
    },
    error: function error(xhr, status, _error2) {
      debugger;
    }
});

Interesting, that I don't get in Scenario two just the dot, I get everything with I tested with all different kinds of jQuery dataTypes, accept-header and so on. Next, I tested different routes, all the same. Further, Swagger and Postman show in both ways the data as expected. I use Chrome 80.0.3987 Official 64bit.

Any ideas on how to handle this?

Edit: If I use the following, I also see both results (two times the same). This can't be the solution.

$items = $this->repository->get();
        echo($items->toJson(JSON_PRETTY_PRINT));        
        return response()->json(["data" => $items]);
Simon
  • 11
  • 3
  • Check [this](https://stackoverflow.com/questions/755885/how-do-i-make-jquery-wait-for-an-ajax-call-to-finish-before-it-returns) q/a. I think your AJAX request doesn't wait for response in some cases. Also, remove images and post actual code instead. – Tpojka Apr 19 '20 at 00:15
  • Thanks @Tpojka unfortunately this isn't the solution. I tested with async: false and cache: false but the same result as 1. Further, I added all code. The images are only supportive to show debugger results. – Simon Apr 19 '20 at 09:32
  • You need to change the `dataType` to `'json'` because that is what you expect to get from the server. Also, you are missing a `c` in `ontentType: 'application/json'`. – kidA Apr 19 '20 at 09:47
  • Finally, the easy solution is that the response was empty because of the missing Acces-Control-Allow-Orgin. It delivers a 200 OK but does not allow to access the content of the response. Solution for Laravel: https://stackoverflow.com/questions/39429462/adding-access-control-allow-origin-header-response-in-laravel-5-3-passport – Simon Apr 19 '20 at 22:17

1 Answers1

0

The solution was very easy but took me a long time. the easy solution is that the response was empty because of the missing Acces-Control-Allow-Orgin. It delivers a 200 OK but does not allow to access the content of the response

Adding Access-Control-Allow-Origin header response in Laravel 5.3 Passport

Simon
  • 11
  • 3