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:
- Image is uploaded by user.
- Image is compressed using the plugin Image Compressor and Uploader
- 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).
- 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.