Estoy tratando de usar el método htmlToImage pero aparece el error "Acceso para buscar en" / aws image url / " del origen 'http://localhost:3000' ha sido bloqueado por la política CORS: No 'Access-Control-Allow- El encabezado "Origen" está presente en el recurso solicitado. Si una respuesta opaca satisface sus necesidades, establezca el modo de la solicitud en "sin cors" para obtener el recurso con CORS deshabilitado.
La URL de la imagen que estoy usando en la etiqueta img proviene del cubo aws s3. Y en AWS s3 ya tenemos configurado CORS
AllowedOrigins como " ". AllowedHeaders como " ".
Este es mi código.
import React, { Component } from 'react' import * as htmlToImage from "html-to-image"; export default class DownloadableImage extends Component { constructor(props) { super(props) this.state = { } } handleDownloadImage = ()=>{ const post = document.getElementById("generateImage"); htmlToImage .toJpeg(post, { style: { backgroundColor: "#fff", }, quality: 0.95, }) .then(function (dataUrl) { var link = document.createElement("a"); link.download = "download.jpeg"; link.href = dataUrl; link.click(); }) .catch((error) => console.log(error, "error")); } render() { return ( <div id="generateImage"> <img class="img-style" src="imgUrl" alt="download_image"> <div> <button onClick={this.handleDownloadImage}>Download</button> ) } }Comunidad, por favor ayúdenme.
Debe agregar la configuración de cors a las propiedades de su depósito.
Consulte este hilo para obtener más detalles: S3 - Encabezado Access-Control-Allow-Origin