How to fix CORS error in laravel using middileware

How to fix CORS error in laravel using middileware

In this article i am going to let you know how to fix CORS error in laravel using middleware. CORS means Cross origin resource sharing.  Sometimes while working of an application like angular, react and get an error like Cross-Origin Request Blocked after an api call or when we call the api through ajax request, we also get this CORS error.

It means our server which is serving the api is blocking or not allowed to serve the resources to the request coming from another server. 

For the solution of this type of error we will need to give the access to that particular server or for all server.

Here we will resolve cross origin resource sharing error for laravel web service or api. For that first thing, we will need to create a middleware. So let’s create a middile ware to handle CORS policy.

Create Middleware

Now open your terminal and run the following artisan command to create a CORS middleware.

php artisan make:middleware CORS

After running the above command, we will have a new middileware file created in app/Http/Middleware directory. Now open this CORS.php file and update the code as mentioned below.

app/Http/Middleware/CORS.php

namespace App\Http\Middleware;
use Closure;
class CORS
{
    public function handle($request, Closure $next)
    {
        header('Access-Control-Allow-Origin: *');
        

        $headers = [
            'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
        ];
        if($request->getMethod() == "OPTIONS") {
            return Response::make('OK', 200, $headers);
        }
        

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

After update CORS.php middleware file, we will need to register this middleware in our laravel application’s Kernel.php file. So open it and update add the following file of code.

app/Http/Kernel.php

namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
class Kernel extends HttpKernel
{
  ...
  ...
    protected $routeMiddleware = [
        ...
        'cors' => \App\Http\Middleware\CORS::class,
    ];
}

After registering CORS middleware, we are able to use this middleware in our application. We will just need to add this middleware in our route group to call on every route which is inside this route group like below.

Route::group(['middleware' => ['api','cors'],'prefix' => 'api'], function () {
    Route::post('register', 'APIController@register');
    Route::post('login', 'APIController@login');
});

After following all the things mentioned above, you can check you will be able to get the api data from frontend application like angular, react or other applications through ajax request and CORS error has been disappeared. And now we have learned to fix CORS error in laravel.

You can also read the article to detect mobile device and redirect to mobile site by clicking on the link given below.

Laravel detect mobile device and redirect mobile website htaccess