Panel domain - CORS Issue - Spatie Media Library File Upload

When I use $panel->domain('admin.example.test') I get following error

Access to fetch at 'https://example.test/storage/1/mWYF1pIRZoK9jwFPajd7FCdDN2kdua-metaYXV0aG9yLWJhbm5lci5qcGc=-.jpg' from origin 'https://admin.example.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

but it works when I remove ->domain() and use ->path(). How can I make it work?

7 Replies

DarpanOP•17mo ago

It works on view page, just not loading on edit page, any suggestions?

Dennis Koch•17mo ago

Since it's the storage folder that's probably handled by nginx, you either need to fix your nginx's config for CORS or make sure that the storage uses the same domain as the panel.

Bruno Alfred•15mo ago

Regarding this section on docs "To correctly preview images and other files, FilePond requires files to be served from the same domain as the app, or the appropriate CORS headers need to be present. Ensure that the APP_URL environment variable is correct, or modify the filesystem driver to set the correct URL. If you're hosting files on a separate domain like S3, ensure that CORS headers are set up." Im trying to make my minio self hosted instance work with my laravel apps (while local or production). Im getting challenge to make things work. The minio server is on ipv4 not domain.

DrByte•15mo ago

CORS is something you configure on the server hosting the image assets, and in your CORS rules you specify which website domains are allowed to embed/display those images via something like an <img> tag. (Similar can be done for JS etc, but you're asking about images.) So, on whatever server you're uploading your images to with your app, you need to configure some CORS rules in that server's hosting config setup ... whether that's an Nginx server you control, or an S3 share service you use, etc.

Anik•12mo ago

were you able to solve this? I have the same issue with subdomains All my subdomains point to the same root public folder in laravel. So, all the subdomains can access storage from subdomain/storage. But the APP_URL points to a single subdomain. I do not have access to the shared hosting server setting except with .htaccess. So, I am trying the second approach "modify filesystem driver to set the correct URL". https://laravel.com/docs/10.x/filesystem#on-demand-disks I was wondering if adding an on demand disk with local driver and updated url when using the domain function in the FilamentServiceProvider would be a good approach

Anik•12mo ago

https://github.com/filamentphp/filament/discussions/5485#discussioncomment-5427539

GitHub

CORS error using FileUpload with Laravel Sail and Share · filamentp...

I have a FileUpload form component as follows: Forms\Components\FileUpload::make('images') ->image() ->columnSpan('full') ->maxSize(1024) ->multiple() ->maxFiles(5) -...

Anik•12mo ago

solved it with the code below in panel provider

  public function boot(): void
    {
        if (app()->isProduction()) {
            config(['filesystems.disks.public.url' => 'https://subdomain1.xyz.in/storage']);
        } elseif (config('app.env') == 'staging') {
            config(['filesystems.disks.public.url' => 'https://subdomain2.xyz.in/storage']);
        }
    }

  public function boot(): void
    {
        if (app()->isProduction()) {
            config(['filesystems.disks.public.url' => 'https://subdomain1.xyz.in/storage']);
        } elseif (config('app.env') == 'staging') {
            config(['filesystems.disks.public.url' => 'https://subdomain2.xyz.in/storage']);
        }
    }

Gaming

Programming

Panel domain - CORS Issue - Spatie Media Library File Upload

Did you find this page helpful?