CORS Issue with React app and Laravel API

The below solution should fix the CORS related issue in Laravel.

Step1: Create a new middleware

‘Php artisan make:middleware cors’

Step 2:

Put the below in the created middle to replace the handle method

    public function handle($request, Closure $next) {       return $next($request)      ->header('Access-Control-Allow-Origin', '*')      ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')      ->header('Access-Control-Allow-Headers',' Origin, Content-Type, Accept, Authorization, X-Request-With')      ->header('Access-Control-Allow-Credentials',' true');}

Step 3:

Then go to Kernel.php file and add this under the The application's global HTTP middleware stack.

p.s. Only the last line with the comment was added, the other other lines exist before.

protected $middleware = [\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,\App\Http\Middleware\TrimStrings::class,\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,\App\Http\Middleware\TrustProxies::class,\App\Http\Middleware\Cors::class,//cors added here  ];

Enjoy!

Laravel 7 supports CORS out of the box through Barry's package

Otherwise install the package by using this composer require fruitcake/laravel-cors

Then publish the config php artisan vendor:publish --tag="cors"

Then modify it as needed.

Here's a working config (careful, this allows every request from other origin):

<?phpreturn [    /*    |--------------------------------------------------------------------------    | Laravel CORS Options    |--------------------------------------------------------------------------    |    | The allowed_methods and allowed_headers options are case-insensitive.    |    | You don't need to provide both allowed_origins and allowed_origins_patterns.    | If one of the strings passed matches, it is considered a valid origin.    |    | If array('*') is provided to allowed_methods, allowed_origins or allowed_headers    | all methods / origins / headers are allowed.    |    */    /*     * You can enable CORS for 1 or multiple paths.     * Example: ['api/*']     */    'paths' => ['api/*'],    /*    * Matches the request method. `[*]` allows all methods.    */    'allowed_methods' => ['*'],    /*     * Matches the request origin. `[*]` allows all origins.     */    'allowed_origins' => ['*'],    /*     * Matches the request origin with, similar to `Request::is()`     */    'allowed_origins_patterns' => [],    /*     * Sets the Access-Control-Allow-Headers response header. `[*]` allows all headers.     */    'allowed_headers' => ['*'],    /*     * Sets the Access-Control-Expose-Headers response header.     */    'exposed_headers' => false,    /*     * Sets the Access-Control-Max-Age response header.     */    'max_age' => false,    /*     * Sets the Access-Control-Allow-Credentials header.     */    'supports_credentials' => true,];

In Laravel to access API without CORS error then you need to add CORS PKG in your Laravel Project.

https://github.com/barryvdh/laravel-cors

You can use this to fix this error.