Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

270
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!