React js: No 'Access-Control-Allow-Origin' header is present on the requested resource whi-CodePudding

I am trying to use htmlToImage method but is showing the error "Access to fetch at " / aws image url / " from origin 'http://localhost:3000' 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.

The image url which I am using in img tag is coming from aws s3 bucket. And on AWS s3 we have already configured CORS

AllowedOrigins as "". AllowedHeaders as "".

This is my code.

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  src="imgUrl" alt="download_image"> 
        <div>
        <button onClick={this.handleDownloadImage}>Download</button>
    )
  }
}

Community, Please help me out.

CodePudding user response：

You have to add cors configuration to your bucket properties.

Refer to this thread for more details: S3 - Access-Control-Allow-Origin Header

CodePudding user response：

there is a checklist for you.

1、If you want to edit an image, you should add the crossOrigin attribute to the img node.

2、Note, In My case. I got the cached image, and the image request doesn't send the cross origin header. So it will get an error.