How to enable CORS in Laravel?

Question

I am in Laravel 5.8 - I kept getting this CORS issue

I've tried

php artisan make:middleware Cors

Add these code

<?php
namespace App\Http\Middleware;
use Closure;
class Cors
{
  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’, ‘X-Requested-With, Content-Type, X-Token-Auth, Authorization’);
  }
}

restart my local Apache 2 sudo apachectl -k restart

Open up app/Http/Kernel.php - added this 1 line

protected $routeMiddleware = [
        'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'admin' => \App\Http\Middleware\AdminMiddleware::class,
        'dev' => \App\Http\Middleware\DevMiddleware::class,
        'cors' => \App\Http\Middleware\Cors::class, <----- 
    ];

refresh the site, go to console, still see the same CORS issue

How would one go about and debug this further?

Answer 1

First solution

Try to set the CORS middleware as a global middleware.

the handle function in the CORS middleware:

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

to add this middleware globally, go to App\Http\Kernel, and add this line in the $middleware array:

\App\Http\Middleware\Cors::class,

---

Second solution

you can also add this code in the bootstrap/app.php

header('Access-Control-Allow-Origin', '*');
header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

hope it works!

Answer 2

Try laravel-cors package that allows you to send Cross-Origin Resource Sharing headers with Laravel middleware configuration.

Answer 3

Add below to you .htaccess (just add to the destination site and origin site)

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Hope it saves someone time, happy coding!!!