SOLVED - CORS issue local development

dircm commented 4 months ago

Hi Philo,

I am getting a CORS block on the load attempt of my counter component.

I have followed the steps in your setup from the blog post. Ill post the contents of my cors config below.

I have built the demo component from your blog post and stored in App/Livewire folder.

Questions:

Do I need to create a route to the component ?
How should I provide any folder nesting in the livewire data-component declaration i.e. example.counter ...

Here is my example hosting page:

<!DOCTYPE html>
<html>
<body>

<h1>Wire Extender Test</h1>

<div>
    <script src="https://aeroquote.test/vendor/wire-elements/wire-extender.js" data-uri="https://aeroquote.test"></script>
    <livewire data-component="counter" data-params='{"count":10}'></livewire>
</div>

</body>
</html>

Here is the cors.php :

<?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' => ['livewire/*', 'api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

Here is the VerifyCsrfToken.php

<?php

namespace App\Http\Middleware;

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

class VerifyCsrfToken extends Middleware
{
    use IgnoreForWireExtender;

    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array
     */
    protected $except = [
        'stripe/*',
    ];
}

And finally here is the result showing the blocked resource :

dircm commented 4 months ago

I have found the issue:

Because the local development environment is running with APP_DEBUG=true this then configures Livewire to return a non-minimised version of the javascript asset.

See vendor/livewire/livewire/src/Mechanisms/FrontendAssets/FrontendAssets.php

If debug is true, then Livewire will return /livewire/livewire.js , but wire-extender.js is requesting /livewire/livewire.min.js.

Setting debug to false solves this issue.

Could you consider requesting the appropriate javascript depending on the debug config. This is how Livewire does it :

app($this::class)->setScriptRoute(function ($handle) {
    return config('app.debug')
        ? Route::get('/livewire/livewire.js', $handle)
        : Route::get('/livewire/livewire.min.js', $handle);
});

clementmas commented 3 months ago

Instead of setting APP_DEBUG=false, you can also manually set data-livewire-asset-uri="/yourwebsite/livewire/livewire.js" in your HTML file during developement as a workaround.

dircm commented 3 months ago

Instead of setting APP_DEBUG=false, you can also manually set data-livewire-asset-uri="/yourwebsite/livewire/livewire.js" in your HTML file during developement as a workaround.

Nice idea thanks !

PhiloNL commented 3 months ago

Thanks @clementmas & @dircm! Great to hear it is working. I'll make sure to include this in the documentation 😄

wire-elements / wire-extender

SOLVED - CORS issue local development #2