wire-elements / wire-extender

Wire Extender allows you to embed any Livewire component on any website or even within a static HTML file.
https://wire-elements.dev/blog/embed-livewire-components-using-wire-extender
MIT License
240 stars 9 forks source link

Cors issue in Laravel 11, Local development #33

Open flatcapco opened 1 day ago

flatcapco commented 1 day 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 day 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,