How to fix ‘CORS’ error in lumen API services

While building APIs with micro-service based application, we often face an error as — ‘https://localhost:8000’ has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.

We usually know this issue as ‘CORS’ issue. Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. The CORS standard is needed because it allows servers to specify not just who can access its assets, but also how the assets can be accessed.

This story will assist you to fix this issue in Lumen application with the help of Laravel-cors package step by step.

Step 1 Install Laravel-Cors package in your terminal & put the below command

composer require fruitcake/laravel-cors

Above command will modify your composer.json by updating your dependencies. Have a look in composer.json & you’ll find this package.

"fruitcake/laravel-cors": "^2.0",

Step 2 Now, in your lumen application, under config folder (If not then create a directory names config) create a file names cors.php & put the below code in it (config/cors.php)

<?php 
return [    
   'paths' => ['*'],
   'allowed_methods' => ['*'],
   'allowed_origins' => ['*'],
   'allowed_origins_patterns' => [],
   'allowed_headers' => ['*'],
   'exposed_headers' => [],
   'max_age' => 0,
   'supports_credentials' => false,
];

Explanation of above code:

paths: This option takes an array value and allows us to enable cors for multiple paths. Some example configurations would be:

'paths' => ['api/*', '*']

allowed_methods: This option indicates what HTTP request methods to allow on the specified paths. [*]allows all methods. Some examples of option values would be:

'allowed_methods' => ['POST', 'GET', 'DELETE', 'PUT', '*']

allowed_origins: This option specifies what source requests should be allowed from. Either from local or single machine or from any machine.

'allowed_origins' => ['http://example.com:8080', '*']

allowed_origins_patterns: This option matches the request origin with patterns

'allowed_origins_patterns' => ['example\']

allowed_headers: This specifies to set the Access-Control-Allow-Headers, which is used in response to a preflight request which includes the Access-Control-Request-Headers to indicate which HTTP headers can be used during the actual request.

'allowed_headers' => ['Access-Control-Request-Method', 'Access-Control-Request-Headers', '*']

exposed_headers: A list of exposed headers consisting of zero or more header names other than the CORS-safelisted request headers that the resource might use and can be exposed.

max_age: This option is used to set the Access-Control-Max-Age response header. The Access-Control-Max-Age response header indicates how long the results of a preflight request ( the information contained in the Access-Control-Allow-Methods and Access-Control-Allow-Headers headers) can be cached.

supports_credentials: This option sets the Access-Control-Allow-Credentials header. The Access-Control-Allow-Credentials response header tells browsers whether to expose the response to frontend JavaScript code when the request's credentials mode (Request.credentials) is included.

Step 3 Now register the CorsServiceProvider manually in your bootstrap/app.php file as follow-

$app->register(Fruitcake\Cors\CorsServiceProvider::class);
$app->configure('cors');
$app->middleware([
    Fruitcake\Cors\HandleCors::class,
]);

Once done, put the below commands, this will clear the configuration cache before it creates

php artisan cache:clear

Have fun 🔥 💪

If you have any query, please put in below. Find me on Github.