#### Access-Control-Allow-Origin not present in header when posting using Axios in ReactJs to a Laravel Backend

I built Laravel APIs and hosted on namecheap. I have set up the handleCORS file with these attributes:

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

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => ['*'],

'max_age' => 0,

'supports_credentials' => true,


On the frontend, my requests are made using axios with the only header set being the content-type: application/json. Making a request when the server was on localhost works fine. But pushing to namecheap and pushing the frontend to vercel, I keep getting this error:

Access to XMLHttpRequest at ‘https://landearn.bumasys.com/api/signup’ from origin ‘https://landearn-web.vercel.app’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

And these are my response headers:

     cache-control: private, no-cache, no-store, must-revalidate, max-age=0
content-length: 1238
content-type: text/html
date: Tue, 14 Sep 2021 09:49:28 GMT
pragma: no-cache
server: LiteSpeed
x-turbo-charged-by: LiteSpeed


The problem is that I have tried so many solutions, used a custom CORS middleware with these configurations:

$headers = [ 'Access-Control-Allow-Origin' => '*', 'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE', 'Access-Control-Allow-Headers'=> 'Authorization, Content-Type, X-Auth-Token, Bearer, Origin', 'Cache-Control' => 'no-cache, private', 'X-RateLimit-Limit' => '60', 'X-RateLimit-Remaining' => '59', ]; return response('OK', 200,$headers);

if($request->getMethod() == "OPTIONS") { // The client-side application can set only headers allowed in Access-Control-Allow-Headers return response('OK', 200,$headers);
}

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


I even added a preflight middleware that captures every OPTIONS request and sends an empty response to the browser requesting resource, here:

public function handle($request, Closure$next )
{
if ($request->getMethod() === "OPTIONS") { return response(''); } return$next(\$request);
}


Have I sought for solutions, yes I have. I don’t know why this is happening, and in time past I have been restricted to using only one Laravel application I configured back then for my API requests, but it’s too clustered and not good enough for me to continue using, funny part is that if I reproduce that same project into another domain by zipping and extracting it, I still get the same CORS problem, am now really lost on how to permanently fix this CORS madness, I really can’t continue this way.

Source: Laravel