search

ctessier / nova-advanced-image-field

🌄 📐 A Laravel Nova advanced image field with cropping and resizing using Vue Advanced Cropper and Intervention Image
https://novapackages.com/packages/ctessier/nova-advanced-image-field
MIT License
100 stars 26 forks source link

JS errors #91

Closed HeadStudios closed 1 year ago

HeadStudios commented 1 year ago

Hi,

I am receiving the following JS errors on the frontend after installing this extension:

edit:1 Access to fetch at 'https://rent-roll-devour-bucket-a1.s3.ap-southeast-2.amazonaws.com/GKoOPfXlm7VkXjYG3djViQylols2qUhYax8TvCVE.png' from origin 'https://dev1.rrdevours.monster' 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. rent-roll-devour-bucket-a1.s3.ap-southeast-2.amazonaws.com/GKoOPfXlm7VkXjYG3djViQylols2qUhYax8TvCVE.png:1 Failed to load resource: net::ERR_FAILED advanced-image-field:2 Uncaught (in promise) TypeError: Failed to fetch at advanced-image-field:2:277471 at u (advanced-image-field:2:270715) at Generator._invoke (advanced-image-field:2:270468) at Generator.next (advanced-image-field:2:271078) at Kr (advanced-image-field:2:275952) at a (advanced-image-field:2:276156) at advanced-image-field:2:276217 at new Promise () at advanced-image-field:2:276096 at Proxy.fetchPreviewImage (advanced-image-field:2:277655)

Any input you have on why this could be happening would be much appreciated.

Thank you!

Code for Resource is:

AdvancedImage::make('Logo URL', 'logo_url')->disk('s3'),
ctessier commented 1 year ago

Hi @HeadStudios

You need to update your S3 configuration to allow cross-origin requests.

Closing as this issue has nothing to do with the packages.

Sorry I can't help further.

Ruitjes commented 1 year ago

Hello @ctessier ,

I would like to reopen this discussion because I am currently experiencing the same problem. The image is visible on the view page, but when I switch to edit mode, I encounter the S3 CORS issue, even though I have set all my S3 settings to use a wildcard (*).

I found a related topic that explains my issue quite well. It appears to be related to caching. See it here: https://github.com/laravel/nova-issues/issues/150#issuecomment-418369533