Filament•11mo ago

SpatieMediaLibrary plugin CORS issue@

Hi everyone I'm using Spatie's Media Library to manage my images in Filament. I did setup an S3 bucket with the following CORS policy:

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

` When I upload an image in Filament I still get a CORS issue. How can I solve this?

19 Replies

DrByte•11mo ago

This is how I usually configure it. (I don't like using * in the AllowedOrigins, so I put both my production URL and local-testing URL, unless I'm using separate buckets for those separate purposes, in which case I put the specific URL instead).

LiamOP•11mo ago

I see, but what I have should work no? I did setup it in my env like this: FILESYSTEM_DISK=s3 FILAMENT_FILESYSTEM_DISK=s3

LiamOP•11mo ago

I get an error when it tries to upload it to the livewire-tmp folder

DrByte•11mo ago

Have you tried specifically adding your .be domain to the AWS AllowedOrigins array?

LiamOP•11mo ago

I'll try that now, getting

Disk named `media` cannot be accessed

Disk named `media` cannot be accessed

error now. But I also changed my FILESYSTEM_DISK to local again and specific ->disk('media') on the form element now.

awcodes•11mo ago

Local disk cannot be accessed like this. Change disk to public. s3 should be fine as long as your s3 permissions are set up correctly.

LiamOP•11mo ago

It is set as public

LiamOP•11mo ago

I'm just really confused, I don't need to add

visibility('private')

visibility('private')

on the form element right? I just want to upload these images on my public bucket.

awcodes•11mo ago

You may still need it. Iirc there’s a caveat with s3 uploads if the livewire temp folder isn’t also set to s3.

LiamOP•11mo ago

Preferably I want the livewire-tmp folder to be on the bucket too but it doesn't work and its related to this I believe: https://github.com/filamentphp/filament/discussions/4483

GitHub

S3 cors · filamentphp filament · Discussion #4483

Local and remote same problem, added bucket Cors config: [ { "AllowedHeaders": [ "Authorization" ], "AllowedMethods": [ "GET", "HEAD", "PUT&qu...

awcodes•11mo ago

If you change the tmp directory in the livewire config I would expect it all to work correctly.

LiamOP•11mo ago

Aha, didn't try that yet. Will give it a try

awcodes•11mo ago

Again, depending on the bucket being configured correctly on the Aws side.

LiamOP•11mo ago

That should be all good. Thanks for the tip 🙂

awcodes•11mo ago

I don’t use Aws though. So my help here is limited.

LiamOP•11mo ago

Didn't work unfortunately.. Will take a break from it for now haha

awcodes•11mo ago

Always a good idea.

LiamOP•11mo ago

Ok fixed the CORS issue. I took the example from AWS again, replaced it with my data and it works now. But now I am still stuck with the Spatie Library not able to access my media disk in my flysystem config Deleting

'visibility' => 'public'

'visibility' => 'public'

fixes it but I don't get why. Isn't that the purpose of the Spatie Media Library to have files uploaded to S3 which are publicly accessed?

Gaming

Programming

SpatieMediaLibrary plugin CORS issue@