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

  axios, cors, laravel, php, reactjs

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' => ['*'],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'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

Leave a Reply