File upload components cors error

[JamesHemery]

Package

filament/filament

Package Version

v2.17.14

Laravel Version

v10.3.2

Livewire Version

v2

PHP Version

PHP 8.2

Problem description

First of all it is not really a server configuration problem but a problem related to the behavior of filament and browser.

In list pages, images are loaded with a tag that is not submitted to CORS, so it doesn't send origin to the server. As a result, the server does not return CORS permissions.

However, in the forms the FileUpload component loads the images to it with a fetch call.

So the problem is the following:

If I use a CDN or an external filesystem (S3 in our case), when I go to the list page it loads the image (without CORS) and caches it. If I go to the edit page, it will load the image with a fetch but it won't work because the browser cache contains the image but without the headers.

At this point, if I want the image to be displayed, I have to clear cache and the image will be loaded and cached with the CORS headers (only if it's called with fetch in first).

The problem is present on all subcomponents of FileUpload, including for the space-media-library-plugin.

Question : Why the choice to use fetch for the FileUpload preview ?

Expected behavior

I think of two solutions:

• Use an image tag when the file is detected as an image (by the extension and a resolution function like determineRenderPreviewMethodUsing).
• Continue to use fetch by adding the no-cache option -> will not work in local when multiple basic domain (ex: filament on subdomain).

Maybe you have another idea?

Steps to reproduce

1. Clone my reproduction
2. Install dependencies
3. Create sqlite db touch database/database.sqlite
4. Run migrations
5. Create a filament user
6. Run Laravel php artisan serve
7. Run s3 behavior simulator npm install && npm run cdn
8. Go in admin and create a software (for example)
9. Clear your cache and go to the list first
10. Then edit your software
11. The preview will not work

If you clear your cache again and load edition in first, this will work.

Reproduction repository

https://github.com/jameshemery/filament-image-cors

Relevant log output

No response

[danharrin]

You obviously understand the problem much better than I do, so please submit a PR to fix it in a non-breaking way

We did not create the file upload component, that is FilePond. So maybe explore the options there

[JamesHemery]

It seems that on filament the images in the FilePond are displayed in a canva. In their demo, they display them in an img tag.

I'll see about making a PR.

[JamesHemery]

@danharrin Indeed the problem is present and reported on FilePond.

It's more of a browser bug that caches the CORS and ignores the Vary header.

The simplest solution and not involving BC is to add the no-cache parameter during the fetch (I will make a PR for that).

This is annoying because in general it is not necessary to configure CORS for an image CDN.

Some resources :

• https://github.com/pqina/filepond/issues/291
• https://github.com/pqina/filepond/issues/371
• https://stackoverflow.com/questions/44865121/canvas-tainted-by-cors-data-and-s3 (very good explanation of the problem)

[danharrin]

Thanks James

[JamesHemery]

Finally I used no-store because no-cache will ignore the cache but will store the new response in the cache. This could cause CORS problems later when displaying the images.

no-store on the other hand will ignore the cache and force a new HTTP request, and it will not update the browser cache.

[awaisali3405]

Cors is still giving error no cache is stored but image is keep load but it is random behaviour sometime it is run good some time time but still could not find what is the happening.