search

hugocxl / react-to-image

📸 Hooks for converting your React components to images
MIT License
126 stars 5 forks source link

CORS Error #101

Open Ianec21 opened 9 months ago

Ianec21 commented 9 months ago

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

Additional Information

None.

hugocxl commented 9 months ago

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

xandemon commented 7 months ago

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

bridger217 commented 6 months ago

+1 same exact issue

hugocxl commented 5 months ago

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

Meriku commented 3 months ago

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) image

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 :)