GET request result to CORS error in Lumen 8

I have this CORS problem when Axios sending GET HTTP to my Lumen app, sending POST HTTP seems fine. I have this middleware who's handling the CORS, below is the code

<?php namespace App\Http\Middleware;

    use Closure;

    class CorsMiddleware{
     /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $headers = [
            'Access-Control-Allow-Origin'      => '*',
            'Access-Control-Allow-Methods'     => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age'           => '86400',
            'Access-Control-Allow-Headers'     => 'Content-Type, Authorization, X-Requested-With'
        ];

        if ($request->isMethod('OPTIONS'))
        {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }

        $response = $next($request);
        foreach($headers as $key => $value)
        {
            $response->header($key, $value);
        }

        return $response;
    }
}

then added to bootstrap/app.php

$app->middleware([
    App\Http\Middleware\CorsMiddleware::class, // cors middleware
]);

with a POST request, everything is working but when doing a GET request, a CORS error occurs. Any help, ideas are greatly appreciated, thanks in advance.

My frontend app is running on http://localhost:3000 (NUXT) and the Lumen app is running on http://localhost:8000

Below image is the screenshot of the error.

Solution

Lumen does not allow OPTIONS method and will return status response 405 MethodNotAllowed, so we need to explicitly add it to routes.

Modify ServiceProvider.php:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        $request = app('request');

        // ALLOW OPTIONS METHOD
        if($request->getMethod() === 'OPTIONS')  {
            app()->options($request->path(), function () {
                return response('OK',200)
                    ->header('Access-Control-Allow-Origin', '*')
                    ->header('Access-Control-Allow-Methods','OPTIONS, GET, POST, PUT, DELETE')
                    ->header('Access-Control-Allow-Headers', 'Content-Type, Origin');                    
            });
        }
    }
}

CorsMiddleware.php

<?php

namespace App\Http\Middleware;

use Closure;

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

        $response->header('Access-Control-Allow-Origin','*');

        return $response;
    }
}

Reference cors tutorial

Hope this works for you!!