wire-elements
Cors issue in Laravel 11, Local development
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?
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,
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 {
}
Same here.
Even the DEMO isn't working. Look https://codepen.io/dan-palmieri/pen/KKOZqZQ
Am I missing something?
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).
@PhiloNL same issue as others above and has started recently on an external site that i don't monitor much. I'm wondering if something in Laravel 11 has changed around CORS handling?
Setting and installing the composer version of wire-extender at v0.0.7 will solve this issue for most users who dont require session support.
"wire-elements/wire-extender": "0.0.7",
The issue seems to stem from the additions made (for non-session users) in the js/wire-extender.js file in this commit even after following the instructions instructions up to the point titled "Enable browser session support" here.
I faced this same problem, even not using web middleware and not needing session, i still had to use 'supports_credentials' => true option at cors config.
