Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cors issue in Laravel 11, Local development #33

Open
flatcapco opened this issue Oct 11, 2024 · 7 comments
Open

Cors issue in Laravel 11, Local development #33

flatcapco opened this issue Oct 11, 2024 · 7 comments

Comments

@flatcapco
Copy link

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
Copy link
Author

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
Copy link
Contributor

PhiloNL commented Oct 20, 2024

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
Copy link

danpalmieri commented Oct 26, 2024 •
edited
Loading

Same here.

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

Am I missing something?

@johnwesely
Copy link

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).

@dircm
Copy link
Contributor

dircm commented Dec 14, 2024

@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?

@dircm
Copy link
Contributor

dircm commented Dec 14, 2024

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.

@dircm dircm mentioned this issue Jan 8, 2025
Open
@dbpolito
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@dbpolito @PhiloNL @danpalmieri @flatcapco @dircm @johnwesely