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

Community, Please help me out.