CORS Error in Laravel 11

Hey, I'm struggling with the following CORS error, i also look at this topic https:// laracasts.com/discuss/channels/laravel/error-cors-policy-no-access-control-allow-origin-with-laravel-11 it's the same error but it doesn't work for me.

Can't post Links here so I make space after the https://

This is the error I get: "Access to XMLHttpRequest at 'https:// domain1.com/path1' (redirected from 'http:// domain2:8086/auth/steam') from origin 'http:// domain2:8086' 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."

Setup is a wsl2 with Laravel 11, Vue3 and Inertia. I want to make a Login for Steam with Socialite. I test it also with the discord driver but same error. Everytime when i click on the login link for steam i get the CORS error. If I click in the console on the redirect link to steam it works fine

So looks like the route of my routes/web.php

<?php

use App\Http\Controllers\Auth\SteamController;
use Illuminate\Support\Facades\Route;

Route::get('/auth/steam', [SteamController::class,'redirect']);
Route::get('/auth/steam/callback', SteamController::class,'handleCallback');

And the cors.php so

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https:// developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie','auth/steam'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

so I'm currently a bit confused as to what the problem might be.

pa2codes

1 year ago

Level 2

Hi @kenta3 ,

I just struggled with a subdomain CORS error and here is my working solution. I had to set supports_credentials to true and added all domains with wildcard to allowed_origins.

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*.mydomain.de', 'mydomain.de'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

I added the related Cors Middleware in my app.php

->withMiddleware(function (Middleware $middleware) {
		...
		 $middleware->append(\Illuminate\Http\Middleware\HandleCors::class);
})

Hope that solves your issue :)

1 like

Kenta3

1 year ago

Best Answer

Level 2

@pa2codes Thanks for you help, but doesn't work for me. I test it with 'web/' with auth also also with all '' doesn't work. I Added also the Handle Cors doesn't change it :( But it brings me to another solution. I think it's not the best solution but it works. I change the vue Link-Tag to an a-Tag. That works for me in this example. if someone has a better solution I am interested in the solution

pa2codes

1 year ago

Level 2

@Kenta3 Okay nice, I updated my post because the problem for me was an httpasswd file I had on my Server with throws the issue. After setting support_credentials to true and remote the httpasswd file it works for me.

If I will come across the same problem you have and find a solution, I will update this post.

Please or to participate in this conversation.