CORS is the acronym of Cross-Origin Resource Sharing. As a developer, You will get this error when you need to access the API from you use Vuejs or any application request to API. There are so many solutions. But most of them don’t work for the n part. So, this is the best and working method for your Lumen project.

Make a CORS middleware

Make a file called CorsMiddleware.php in app\Http\Middleware folder. After that just copy and paste the following code there. Then, Save it and try the next step.

<?php
namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
$headers = [
'Access-Control-Allow-Origin' => '*',
'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
'Access-Control-Allow-Credentials' => 'true',
'Access-Control-Max-Age' => '86400',
'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With'
];

if ($request->isMethod('OPTIONS'))
{
return response()->json('{"method":"OPTIONS"}', 200, $headers);
}

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

return $response;
}
}

 

Register CORS Middleware on Your Bootstrap App File.

Go for the  bootstrap/app.php file and Paste/replace the following code lines.

$app->middleware([
App\Http\Middleware\CorsMiddleware::class
]);

 

All done. Now you are ok to send any Axios requests for your Lumen API. If you got any issues, Let us know in the comment section. Thank you for reading our article until the end.

Write A Comment