CORS error using FileUpload with Laravel Sail and Share

[LemonPie22]

I have a FileUpload form component as follows:

Forms\Components\FileUpload::make('images')
    ->image()
    ->columnSpan('full')
    ->maxSize(1024)
    ->multiple()
    ->maxFiles(5)
    ->enableReordering()
    ->visibility('public')
    ->enableOpen(),

Running locally using Laravel Sail it works fine and the images display as expected:

The problem comes when I use the sail share command so that colleagues can access the site remotely (as described at https://laravel.com/docs/9.x/sail#sharing-your-site).

When I do this my site, which locally is at http://localhost:8000, can be accessed from http://t90xqutfro.laravel-sail.site:8080. That is for as long as I leave my laptop on with Sail Share running on it.

When I try to look at the images on the shared site I get the following console errors:

Failed to load resource: the server responded with a status of 429 ()
1:1 Access to fetch at 'http://localhost:8000/storage/6MTgySMSnDgpZHKPEkWIZGBnrg0Foq-metaZm9yZC1maWVzdGEtZWNvYm9vc3QtMTAtbGl0cmUtcmV2aWV3LTIwLWpwZy53ZWJw-.webp' from origin 'http://t90xqutfro.laravel-sail.site:8080' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.
localhost:8000/storage/6MTgySMSnDgpZHKPEkWIZGBnrg0Foq-metaZm9yZC1maWVzdGEtZWNvYm9vc3QtMTAtbGl0cmUtcmV2aWV3LTIwLWpwZy53ZWJw-.webp:1          Failed to load resource: net::ERR_FAILED
module.esm.js:23777                  Uncaught (in promise) TypeError: Failed to fetch
    at module.esm.js:23777:36
    at u (module.esm.js:2:1)
    at Generator._invoke (module.esm.js:2:1)
    at Generator.next (module.esm.js:2:1)
    at yc (module.esm.js:2:1)
    at a (module.esm.js:2:1)
    at module.esm.js:2:1
    at new Promise (<anonymous>)
    at module.esm.js:2:1
    at module.esm.js:23780:14
1:1 Access to fetch at 'http://localhost:8000/storage/7g4SmcRSNnTK6EWiJiEK0ZCc0GDnga-metaZm9yZC1maWVzdGEtZWNvYm9vc3QtMTAtbGl0cmUtcmV2aWV3LTE2LWpwZy53ZWJw-.webp' from origin 'http://t90xqutfro.laravel-sail.site:8080' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.
localhost:8000/storage/7g4SmcRSNnTK6EWiJiEK0ZCc0GDnga-metaZm9yZC1maWVzdGEtZWNvYm9vc3QtMTAtbGl0cmUtcmV2aWV3LTE2LWpwZy53ZWJw-.webp:1          Failed to load resource: net::ERR_FAILED
1:1 Access to fetch at 'http://localhost:8000/storage/j5sXJdKb56L0WDyULXLeWP1P0fP2dg-metaMzI4NjM0MTk0MzAxNl8xOTQzMC5qcGc=-.jpg' from origin 'http://t90xqutfro.laravel-sail.site:8080' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.
localhost:8000/storage/j5sXJdKb56L0WDyULXLeWP1P0fP2dg-metaMzI4NjM0MTk0MzAxNl8xOTQzMC5qcGc=-.jpg:1          Failed to load resource: net::ERR_FAILED
module.esm.js:23777                  Uncaught (in promise) TypeError: Failed to fetch
    at module.esm.js:23777:36
    at u (module.esm.js:2:1)
    at Generator._invoke (module.esm.js:2:1)
    at Generator.next (module.esm.js:2:1)
    at yc (module.esm.js:2:1)
    at a (module.esm.js:2:1)
    at module.esm.js:2:1
    at new Promise (<anonymous>)
    at module.esm.js:2:1
    at module.esm.js:23780:14
module.esm.js:23777                  Uncaught (in promise) TypeError: Failed to fetch
    at module.esm.js:23777:36
    at u (module.esm.js:2:1)
    at Generator._invoke (module.esm.js:2:1)
    at Generator.next (module.esm.js:2:1)
    at yc (module.esm.js:2:1)
    at a (module.esm.js:2:1)
    at module.esm.js:2:1
    at new Promise (<anonymous>)
    at module.esm.js:2:1
    at module.esm.js:23780:14

My .env file contains the following:

APP_URL=http://localhost:8000
APP_PORT=8000
FILESYSTEM_DISK=public

It looks like the images are being blocked by the CORS policy. I've tried to solve this by updating /config/cors.php to be as follows:

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

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => ['*'],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

After updating this file I cleared my cache with sail artisan optimize:clear but it didn't fix the problem.

I suspect that files in storage aren't included in this, but this is where I run out of ideas.

Any suggestions?

[danharrin]

Your APP URL needs to contain the sharing URL

[LemonPie22]

That worked. Thanks @danharrin 😄

Now I just have to figure out how to switch the APP_URL depending on whether I'm using sail share or not.

[agunbuhori]

how to set the APP_URL using https?

[danharrin]

in .env

[dinandmentink]

Chiming in here. I'm using filamentphp in a multi-tenant setup. Filepond now only displays files if I'm accessing the site on the same domain as the APP_URL. If I'm accessing the site on another url Filepond throws cors errors. It's the same when using the public drive or an s3.

Is there any way to instruct filepond to use the current url over the one configured in APP_URL?

[danharrin]

In middleware, use config()->set('app.url', 'correct url'). It's not Filepond's fault if your URL is incorrect, so you should correct it in middleware

[dinandmentink]

Thanks for the reply. I'm not saying it's filepond's (or anybody's) fault, just trying to figure out how to instruct it.

Thanks for the response and pointer.

[dinandmentink]

Unfortunately. This doesn't work. Filepond will still request from http://localhost:8000 and not the url I have overridden in the middelware:

<?php

namespace App\Providers;

use Filament\Forms;
use Illuminate\Support\ServiceProvider;

class FilamentServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap services.
     */
    public function boot(): void
    {
        config()->set('app.url', 'http://otherwebsite.localhost:8000'); // neither dynamically or some fixed url
    }
}

Any other way you can think of to correct this?

Edit: some extra info.

Edit 2: It seems I have found a solution. I also need to override the filesystem. Will try to figure out exactly how/why and then amend this post (this issue ranks high in google when searching "filament cors").

[danharrin]

Probably because the filesystem is generating asset URLs with the old domain

[dinandmentink]

So, the issue was this (for those reading in the future).

With public local storage (in development in my case) it's required to serve the images from the same domain as the admin interface. Easiest way is to configure the APP_URL, but in the case of a multi tenant setup use a Provider something like this. Ensure the configured filesystem driver returns urls to the same domain as well (this was my issue).

<?php

namespace App\Providers;

use Filament\Forms;
use Illuminate\Support\ServiceProvider;

class FilamentServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap services.
     */
    public function boot(): void
    {
        config()->set('app.url', 'http://otherwebsite.localhost:8000'); // neither dynamically or some fixed url
    }
}

For s3 storage and the like. Ensure the external storage (like cdn.websitename.com) actually sets the cors headers. Because filepond uses a canvas and doesn't include the image with an <img> tag the images get blocked when there are no cors headers. This is not very common for displaying images in an admin area so it took me a while to figure this out. Setting the cors headers differs per s3 (or similar) provider, but in my case it looks like this:

Note that the origin is set to * here because of the multi-tenant setup, usually this could be the domain you are serving the admin from.

Question to @danharrin: shall I write a few sentences about this for the documentation? I think it would help to quickly discuss the APP_URL and the cors headers with the file upload (https://filamentphp.com/docs/2.x/forms/fields#file-upload).

[danharrin]

Sure, adding a few sentences to the docs would be good, thanks

[iotron]

Hello, were you able to solve this issue by any chance? We have a similar issue when we are using multiple panels with domain(), and we getting an error because of a mismatch between domain URL and storage URL. Any idea how to set the storage URL in panel provider?

[LemonPie22]

Does this help @iotronlab? https://filamentphp.com/docs/3.x/forms/fields/file-upload#configuring-the-storage-disk-and-directory

[muba00]

If anyone still has this issue, especially if you have multi-tenant setup, just unset APP_URL in .env file:

APP_URL=

It works perfectly in my case.

[jjrohrer]

This sort of worked for me, but of course, APP_URL is often expected to be set properly by others, so this solution traded one problem for a differently problem

[malzariey]

You would do the same if you remove the app.url from your filesystem config

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => '/storage',
            'visibility' => 'public',
            'throw' => false,
        ],

[PUCPR-Dev-Felipe]

Pessoal já tive esse problema também em armazenamento de blob pela aplicação.
É importante que a configuração de CORS seja feito nas aplicações que tem interação (pois essa é umma validação feita pelo navegador).
Se estiveram usando serviço de nuvem como foi o meu caso sugiro que verifiquem as configurações de CORS do ambiente, para ilustrar segue a imagem:

No caso na minha aplicação já havia configurado o CORS porém só após configurar no Azure que o problema cessou.

[mimsinn]

If anyone has this problem on localhost, definitely consider the following attempt

APP_URL=http://localhost:8000
to
APP_URL=http://127.0.0.1:8000

[lucascardial]

it's work!