Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

272
Vistas
React js: no hay un encabezado 'Access-Control-Allow-Origin' en el recurso solicitado al usar htmlToImage

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.

about 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

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

about 4 years ago · Santiago Trujillo Denunciar

0

hay una lista de verificación para usted.

1、Si desea editar una imagen, debe agregar el atributo crossOrigin al nodo img .

2 、 nota, en mi caso . Obtuve la imagen en caché y la solicitud de imagen no envía el encabezado cross origin . Entonces obtendrá un error.

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda