Laravel VueJs Cors working only with php artisan serve

I'm developing a VueJS app separated from a Laravel Backend, and I'm facing the Cors problem. I know what the problem is and I tried the following packages to solve it:

• Spatie/laravel-cors
• Fruitcake/laravel-cors
• Barryvdh/laravel-cors

I followed the instructions carefully. I am sure I did not make any mistake when installing the packages, and I have tried them many times to ensure that no error was made. However, none of those packages worked completely. They worked well with POST and GET requests, but not with DELETE, PUT, PATCH, and OPTIONS. So, I implemented this simple Middleware:

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {

        header("Access-Control-Allow-Origin: http://localhost:8080");
        header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization, X-Auth-Token, X-Requested-With');
        header('Access-Control-Allow-Methods: POST, GET, PUT, PATCH, DELETE, OPTIONS');

        return $next($request);
    }
}

This works perfectly if I run php artisan serve on port 8000, and then set window.axios.defaults.baseURL = 'http://127.0.0.1:8000/api'. However, this custom middleware do not work if I set window.axios.defaults.baseURL = 'http://laravel-todo-vue.test/api', which is where my Laravel app is served by apache.

I'd like make requests to http://laravel-todo-vue.test because otherwise I have to change axios.defaults.baseURL everytime that php artisan serve uses another port when port 8000 is busy.

Any help is appreciated.

via Chebli Mohamed