Laravel passport consuming api with js not working

Question

I am trying to consume my api using ajax (axios) request as the way it is instructed in laravel docs here. But it is not working, shows errors like the following image

My sample header response looks likes the following:

My ajax request looks like this:

   axios.get('http://localhost:81/test_laravel/public/api/user')
            .then(function(response){
                console.log('Component mounted.')
            })
            .catch(function(error){
                console.log(error.response.status)
            });

Don't have a clue what is going on. Please help.

Answer 1

This works if I make a change in the \App\Http\EncryptCookies.php file like this:

<?php

namespace App\Http\Middleware;

use Illuminate\Contracts\Encryption\Encrypter as EncrypterContract;
use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;

class EncryptCookies extends Middleware
{
    /**
     * The names of the cookies that should not be encrypted.
     *
     * @var array
     */
    protected static $serialize = true;

    protected $except = [
        //
    ];

    public function __construct(EncrypterContract $encrypter)
    {
        parent::__construct($encrypter);
    }
}

Changing the value of $serializable by adding the line protected static $serialize = true; works.