CORS error when attempting to use any image from "Base64 to URL" plugin

Plugin builders
1

I am building an app that can manipulate images using a plugin that I’ve created, but I’m running into an issue with CORS. Here is my order of operations and when I run into an issue:

  1. Image is uploaded by user.
  2. Image is compressed using the plugin Image Compressor and Uploader
  3. Compressor outputs a Base 64 string which is then uploaded to my database using the “Image Compressor and Uploader” plugin (I’ve also tried using the Base64 File Uploader and Downloader plugin).
  4. Image is saved to an object in my database using the output URL.

----- This is where the CORS error happens ----
5. I pass the image that was saved from the output URL to the plugin I made and immediately get a CORS error.

Important: In an attempt to mitigate this problem, and thinking it may have been my plugin, I used a plugin to convert my URL from step 4 to base64 again before passing to my plugin, but that plugin also gave the CORS error.

I am loading the image using img.src and setting img.crossOrigin = ‘anonymous’; in my plugin.

The CORS error doesn’t happen any other time I’m using the app. I can load those images just fine on my bubble page, just not within the plugin.

1 Like
2

Is it a Server side action?
Also, if the file is returned as base64, you can use :saved to s3 or send the base64 to Bubble api using connector

3

All the actions I’m running are client side. I’ve tried using the :saved to s3 in a client side workflow but it doesn’t seem to do anything with the base64 string. Am I supposed to use the URL after :saved to s3?

2 Likes
4

I just realized that the images are being saved to the live database instead of the dev database, which is probably causing the CORS issue. I’m assuming that it is an issue with the plugin I was using. Thanks for your help.