How to resolve CORS issue with Laravel when Access-Control-Allow-Credentials header is not set correctly?

Question

I'm encountering a CORS issue with my Laravel application. I have a custom CORS middleware (OwnCors) that I'm using to handle CORS requests. Despite configuring it to allow credentials, I'm facing an issue where the Access-Control-Allow-Credentials header is not set correctly.

Here's my OwnCors middleware class:

class OwnCors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(Request $request, Closure $next)
    {
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Credentials: true"); 

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

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

And here's my CORS configuration (config/cors.php):

<?php

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

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

    'allowed_origins' => ['http://localhost:3000','https://personaltrainerkmm.com','https://traning-app.vercel.app','*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true, 

];

Despite setting 'supports_credentials' => true, the Access-Control-Allow-Credentials header in the response is not being set correctly. Instead, it's empty.

I'm making requests from a frontend hosted on https://fitnesspt.personaltrainerkmm.com to a backend hosted on https://personaltrainerkmm.com.

How can I ensure that Laravel properly sets the Access-Control-Allow-Credentials header to true in the response to resolve this CORS issue?

Any help or insights would be greatly appreciated. Thank you!

You should configure CORS in at most one place, preferably with a proven middleware rather than implementing it yourself. I recommend you get rid of OwnCors and solely rely on the config in config/cors.php instead. Also, note that, if your frontend has origin https://fitnesspt.personaltrainerkmm.com, you'll need to list that as an allowed origin; https://personaltrainerkmm.com won't do. — jub0bs
– jub0bs, Commented Apr 4, 2024 at 2:40
i do that , i face the same error ''' Access to XMLHttpRequest at 'personaltrainerkmm.com/api/admin/login' from origin 'fitnesspt.personaltrainerkmm.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.''' — Hocine Djouamaa
– Hocine Djouamaa, Commented Apr 4, 2024 at 21:58

Sandro Jhuliano Cagara · Accepted Answer · 2024-04-04 03:46:05Z

1

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class OwnCors
{
       /**
       * Handle an incoming request.
       *
       * @param  \Closure(\Illuminate\Http\Request):     (\Symfony\Component\HttpFoundation\Response)  $next
       */
       public function handle(Request $request, Closure $next): Response
       {
             return $next($request)
                    ->header('Access-Control-Allow-Origin', '*')
                    ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
                    ->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, X-Token-Auth, Authorization');
       }
}

To load this piece of middleware, we’ll need to add a line to app/Http/Kernel.php’s $routeMiddleware array:

'own.cors' => \App\Http\Middleware\OwnCors::class,

Also, we’ll have to add it to the $middleware array as we did for the previous middleware:

\App\Http\Middleware\OwnCors::class,

answered Apr 4, 2024 at 3:46

Sandro Jhuliano Cagara

1191 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hocine Djouamaa Over a year ago

i do that , i face the same error ''' Access to XMLHttpRequest at 'personaltrainerkmm.com/api/admin/login' from origin 'fitnesspt.personaltrainerkmm.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.'''

Collectives™ on Stack Overflow

How to resolve CORS issue with Laravel when Access-Control-Allow-Credentials header is not set correctly?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related