CORS issue with Filerobot: Some images open in the editor, but others throw CORS policy errors

88 Views Asked by At

`I'm encountering a CORS (Cross-Origin Resource Sharing) issue with Filerobot, and I'm seeking assistance in resolving this. I have a public bucket, and I've configured it to allow access from any domain. However, some images are opening in the Filerobot editor without any problem, while others result in CORS policy errors.

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

example Image-url: https://solarhub-medias-staging.s3.us-east-1.amazonaws.com/quote/648c1e67d676875b0500f864/logo1.png

Error Message: Access to image at 'https://solarhub-medias-staging.s3.us-east-1.amazonaws.com/quote/648c1e67d676875b0500f864/logo1.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Versions: Filerobot: "react-filerobot-image-editor": "^4.5.2" React: "react": "^18.2.0"

CORS Configuration: I have verified that my server or service serving the images has the correct CORS headers in place to permit requests from my domain.

Browser Console: I've checked the browser console for specific CORS error messages, and the error I'm receiving is [Access to image at 'https://solarhub-medias-staging.s3.us-east-1.amazonaws.com/quote/648c1e67d676875b0500f864/logo1.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource].

Image URLs: The URLs of the images do not throw a CORS error when opened using the tag for display in the UI.

I would appreciate any guidance or suggestions on how to resolve this CORS issue with Filerobot. If anyone has encountered a similar problem or has insights into Filerobot's CORS configuration, please share your thoughts.

Thank you in advance for your assistance!`

0

There are 0 best solutions below