CORS error when downloading images from Bubble S3 server

In my app, Bubble is only being used for the front-end and image storage. The database is on Xano, along with all of the backend logic.

The image URLs stored in the Xano database look something like this: https://6d4355394b62085zb93adc4e68a76fce.cdn.bubble.io/f1686643064227x776712257849459000/testpic.jpeg

At a high level, the main purpose of this app is to allow users to upload, share, and download images. The image URLs are stored in a Xano database. The images display throughout the app without an issue, but whenever I try to download the image, I receive a CORS error in the console (Ensure CORS response header values are valid).

I have tried:

  1. Using a custom HTML element with the download attribute
  2. Downloading the images using base64
  3. Using the “image” type as the API connector output type and using :saved in s3 as the download url for an image
  4. Allowing all iframes

But none of those have worked, and I am 10 gray hairs and 3 wrinkles richer. I would like to think I am missing something here…I have been crawling the forums and have not been able to find a solution. Just a lot of unanswered but similar questions :joy:

Any insight here would be greatly appreciated.

I am seeing weirdness with cors errors and svg files uploaded directly to bubble as well. Seems random and can replace the file and it works fine. See this other thread: Is there an issue with SVG’s?

This topic was automatically closed after 70 days. New replies are no longer allowed.