React :在使用htmlToImage时，请求的资源上没有“访问-控制-允许-原产地”标头。

Question

我正在尝试使用htmlToImage方法，但显示错误"Access to fetch at“/ aws映像url /”from from 'http://localhost:3000‘已被CORS策略阻塞:请求资源上不存在’访问控制-允许-原产地‘标题。如果不透明响应满足您的需要，请将请求的模式设置为' No - CORS’以获取禁用CORS的资源。

我在img标签中使用的图像url来自aws s3桶。在AWS s3上，我们已经配置了CORS

AllowedOrigins为"“。AllowedHeaders为"“。

这是我的密码。

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>
    )
  }
}

社区请帮帮我。

Answer 1

您必须将cors配置添加到桶属性中。

有关更多详细信息，请参阅此线程：S3 - Access-Control-Allow-Origin Header

Answer 2

有一张清单给你。

1如果要编辑图像，则应将crossOrigin属性添加到img节点。

2 My case中的、Note。我得到了缓存的映像，而图像请求没有发送cross origin头。所以会有一个错误。