Services Plugins FAQs

CORS policy error when screening an item with images uploaded to bubble servers

Help Needed
#1

Hello,

I’m creating an application for a car rental service, and I’ve encountered a problem while trying to screenshot an element of the page. I use the following plugins:

Image Annotation: I use it to mark an element on an image, then a popup appears, I select the type of damage, and then an appropriate letter symbolizing the type of damage appears.
PDF & Screenshot Pro - BEP: for capturing images which I then want to automatically assign to the appropriate attribute in car damages - for example, front end damage, as well as for creating PDFs for printing.
I have created option sets with names of types of damages and images. From the database side, through modifications of attributes in option sets, I uploaded appropriate images (letters symbolizing a certain type of damage). Everything displays exactly as I planned, but the problem appears only after attempting to capture using the PDF & Screenshot Pro - BEP plugin. An error appears in the console:
Access to image at ‘https://6577fea3ebc4defa765eae86a19029a1.cdn.bubble.io/f1710105506191x646257863340176800/P.png’ from origin ‘https://seositefy.bubbleapps.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
html2canvas.min.js:20
GET https://6577fea3ebc4defa765eae86a19029a1.cdn.bubble.io/f1710105506191x646257863340176800/P.png net::ERR_FAILED
4 373ms Error loading image https://6577fea3ebc4defa765eae86a19029a1.cdn.bubble.io/f1710105506191x646257863340176800/P.png

I browsed various topics on forums, but couldn’t figure it out on my own. Does anyone have an idea how to manage the CORS policy? Or another way in which I can save an image with other images overlaid (letters symbolizing damages) and assign it to an attribute in the database? The next step is to print the appropriate documents, and I need to place one image of the car’s layout showing its damages there.

If you’ve read this and are willing to offer me some advice, I would be very grateful. I’m running out of ideas on how to manage this.

1 Like
#2

Hello @seositefy, :wave:

Regarding the CORS policy error you’re encountering, this issue is related to a third-party plugin. It’s best to address this question directly to the plugin developer, as they will be more equipped to provide a solution for their specific plugin, especially since we are unable to fix errors related to plugins other than our own:

Here is some general advice on how to proceed:

  1. Contact the developer of the PDF & Screenshot Pro - BEP plugin: Renato Asse Contributor Profile | Bubble They should provide you with guidance on how to handle CORS issues with their plugin.
  2. Review the plugin’s documentation for any mention of CORS handling or configuration settings that might be available.
  3. If you’re hosting images or other resources that the plugin uses, ensure that your server is configured to include the ‘Access-Control-Allow-Origin’ header.
  4. Explore alternative methods to capture and assign images. You might consider using a different plugin or a custom implementation that doesn’t run into the same CORS issues.
  5. The Bubble Forum community is an excellent resource. Post your issue in the forum where others might have encountered and solved similar issues.
  6. If the problem persists and is critical to your application, hiring a Bubble developer or consultant who specializes in these integrations might be a worthwhile investment.

Remember, CORS policies are browser-enforced security features to prevent unauthorized domains from accessing resources, so any solution will need to respect these security protocols.

I hope this helps, and I wish you the best in resolving this issue.

Best regards,
Daniel.