Cors issue in Laravel 11, Local development

flatcapco commented 1 month ago

I'm having a bit of a shocker :P

If I follow the steps for Laravel 11 using the Counter example... and follow the optional Session steps too, then I get a counter that is almost working but on click I get a session expired warning and the page refreshes.

If I dont follow the optional Session steps then I get a cors error: "Access to fetch at 'https://xxx/livewire/embed' from origin 'https://xxx.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'."

My little test page that is accessing the component is very simple:

<html>
    <head>
        <script src="https://xxx.test/vendor/wire-elements/wire-extender.js" data-livewire-asset-uri="https://xxx.test/livewire/livewire.js"></script>
    </head>
    <body>

<livewire data-component="counter" data-params='{"count":10}'></livewire>

    </body>    
</html>

And both urls for the .js files are loading as expected.

I've tried: php artisan vendor:publish --force --tag=wire-extender

My custom middleware is exactly like the example with just an addition of excepts:


namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as FrameworkClass;
use WireElements\WireExtender\Http\Middlewares\IgnoreForWireExtender;

class VerifyCsrfToken extends FrameworkClass
{
    use IgnoreForWireExtender;

    protected $except = [
        'stripe/*',
        'resend/*',
    ];
}

Loaded in app like so:

    ->withMiddleware(function (Middleware $middleware): void {
        $middleware->web(replace: [
            ValidateCsrfToken::class => CustomVerifyCsrfToken::class,
        ]);

And my cors file


return [

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

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

Can anyone see where I've gone wrong here?

flatcapco commented 1 month ago

I should note adding the following cors settings fixes it but it shouldn't be required (in my understanding?)

    'allowed_origins' => ['https://xxx.test'],
    'supports_credentials' => true,

PhiloNL commented 1 month ago

Sounds like the CSRF middleware is still applied, can you verify that all your embeddable components have the embeddable attribute?

use WireElements\WireExtender\Attributes\Embeddable;

#[Embeddable]
class Counter {

}

danpalmieri commented 1 month ago

Same here.

Even the DEMO isn't working. Look https://codepen.io/dan-palmieri/pen/KKOZqZQ

Am I missing something?

johnwesely commented 2 weeks ago

I am also having the same issue, both with recreating the demo and with creating my own embedabble component within an L11 app.

I am getting the following errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://wire-elements.dev/livewire/embed’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://wire-elements.dev/livewire/embed. (Reason: CORS request did not succeed). Status code: (null).

wire-elements / wire-extender

Cors issue in Laravel 11, Local development #33