Laravel 5.1 - easily enable CORS

CORS stands for Cross-Origin Resource Sharing an is a specification that allow modern browsers to request (and receive) data from a domain other than the one serving the page that made the request.

If this is the first time you’re hearing about this, please allow me to introduce you to these two great resources:

-http://www.html5rocks.com/en/tutorials/cors/
-http://enable-cors.org

So you’re building your API using Laravel and when when you try to make a XHR request you see the following message in your browser’s console:

This means your server is not sending back to the client the headers that allow CORS:

1.Access-Control-Allow-Origin
2.Access-Control-Allow-Methods

So how to implement this in Laravel? Super easy! Middlewares come to the rescue.

Using your Terminal, navigate to your project’s root directory and issue the following artisan command:

1
php artisan make:middleware Cors

Now, using your editor of choice, change the newly created /app/Http/Middleware/Cors.php so it look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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');
}
}

Next update /app/Http/Kernel.php adding the following instruction which will make Laravel aware of your custom middleware:

1
2
3
4
5
6
protected $routeMiddleware = [
'auth' => \App\Http\Middleware\Authenticate::class,
'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
'cors' => \App\Http\Middleware\Cors::class, // <<< add this line
];

To wrap things up, just use your middleware as you’re used to:

1
2
3
4
Route::get('breweries', ['middleware' => 'cors', function()
{

return \Response::json(\App\Brewery::with('beers', 'geocode')->paginate(10), 200);
}]);

And that would be all. Of course there are several other options to consider when enabling CORS but the way to return them to the browser is the same, as shown right above.

Hope that helps!