CORS Error

[Ianec21]

Description

When I am trying to convert my div into an image, I receive this error. I am getting images from firebase bucket storage. Can I somehow put no-cors argument in the fetch method?

Access to fetch at 'https://firebasestorage.googleapis.com/v0/b/testmd-21f8a.appspot.com/o/images%2Fimagini-itemi%2F1706719835228Item%202%20Bac-01.jpg?alt=media&token=b7845988-f909-4ac3-b856-037a77f46ffd' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Link to Reproduction

Steps to reproduce

1. Create an div.
2. Try to convert the div to an image.

Version

latest

Browser

Google Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

None.

[hugocxl]

it seems not to be related to this React implementation but an issue from "html-to-image". Could you give it a look?

[xandemon]

@Ianec21 can you show how you are converting div to image? It should directly return you a base64 data I think

[bridger217]

+1 same exact issue

[hugocxl]

@Ianec21 @bridger217 could you provide a reproducible example to help looking into the issue?

[Meriku]

Hello everyone,

I've encountered a similar issue and spent a few days resolving it, so I wanted to share some information.

When an image is displayed in a component using the <img> tag with a URL to the source, the browser does not check CORS policies or make a preflight request source. However, when react-to-image tries to build an image from the component, it makes an explicit fetch to the source using the GET method. By default, the browser expects to receive an Access-Control-Allow-Origin header in the response. While the image can be shown in an <img> tag, react-to-image fails to build the image from the component due to CORS restrictions. (code attached)

I'm using an AWS S3 bucket with CloudFront. In my case, I added a "SimpleCORS" response headers policy to force CloudFront to include the Access-Control-Allow-Origin header in every response, and it seems to be working fine now.
I have no idea if it is possible to fix on the library side (as no-cors restricts the usage of response body in js code)

Hope this info will be helpful to someone :)