Add CORS support for auth endpoints in Laravel

You have build nice little API with Laravel and you have authentication setup with passport. But when you try to authenticate with your mobile application you get that infamous CORS error. How to fix it and enable CORS calls from your mobile application to your API?

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos. Certain “cross-domain” requests, notably Ajax requests, are forbidden by default by the same-origin security policy.
Wikipedia

Calling /auth/token endpoint from your mobile application will get you this CORS error. So in order to fix this we need to add CORS support for API authentication endpoints. We are lucky because there is already package which can help us with that. CORS Middleware for Laravel 5 laravel-cors by barryvdh. The laravel-cors package allows you to send Cross-Origin Resource Sharing headers with Laravel middleware configuration. Using this middleware we can easily enable or disable CORS for every route in our API. If you are working on API for mobile application you want all of your endpoints to be available so you’ll probably want to enable CORS globally for all of them.

Install package

 composer require barryvdh/laravel-cors

Add laravel-cors package in providers array inside app.php file:

config/app.php
Barryvdh\Cors\ServiceProvider::class,

Enable CORS globally

To allow CORS for all your routes, add the HandleCors middleware in the $middleware property of app/Http/Kernel.php class:

app/Http/Kernel.php
protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

Enable CORS for auth endpoints

This will allow CORS requests for all of your API endpoints, but for some reason this didn’t worked for me for authentication endpoints provided by Laravel Passport package. To enable CORS for those endpoints too you need to edit AuthServiceProvider.php file and add:

app/Providers/AuthServiceProvider.php
 Route::middleware('cors')->group(function() {
            Passport::routes();
        });

So we wrapped Passport::routes(); inside route group using CORS middleware. You can see full file content bellow. Now you should be able to authenticate from any application mobile or some other without CORS error.

app/Providers/AuthServiceProvider.php
namespace App\Providers;

use Laravel\Passport\Passport;
use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Gate;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        'App\Model' => 'App\Policies\ModelPolicy',
    ];

    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    {
        $this->registerPolicies();

        Route::middleware('cors')->group(function() {

            Passport::routes();

        });

    }
}
Share with your friends