从带有SORS问题的S3中获取图像

Question

我正在尝试从AWS S3获取图像，并且遇到了CORS问题。

我在Android上的Cordova应用程序中遇到错误：

SystemWebChromeClient: http://localhost:8080/#/: Line 0 : Access to image at 'https://s3.us-east-2.amazonaws.com//wantify/merchants/56/logo.png' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是由于以下代码：

  getColors(this.props.merchant.logo).then(colors => {
    var colorsHex = colors.map(color => color.hex());
    this.lightestColor(colorsHex);
  });

现在getColors来自库get-image-colors ，因此我的理解是它自己进行调用。

我试图弄清楚如何忽略CORS或遵守S3的CORS。

我的CORS设置如下：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedOrigin>localhost:8080</AllowedOrigin>
    <AllowedOrigin>http://localhost:8080</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

get-image-colors还允许使用base64缓冲区，但是当我尝试这样做时，我也没有成功。

  getBase64(this.props.merchant.logo).then(function(base64) {
    console.log("axios base64");
    console.log(base64);
  });
  function getBase64(url) {
    return axios
      .get(url, {
        responseType: "arraybuffer",
        headers: {
          Origin: "Example"
        }
      })
      .then(response => new Buffer(response.data, "binary").toString("base64"));
  }

我在这里做错了什么？ 如何获得没有CORS问题的图像？ 我知道AWS需要Origin标头（这使在Chrome中进行测试变得头疼），但是即使像上面的base64示例中那样包含它，它也无法正常工作。

如何从AWS S3正确获取映像？

Answer 1

编辑：这是错误的答案（请参阅下面的评论）Amazon S3不接受OPTIONS作为CORS操作

Axios很可能会在GET之前发出OPTIONS请求。 确保在Amazon S3上将OPTIONS操作添加到您的CORS策略中，

例如 ：

<CORSRule>
   <AllowedOrigin>http://localhost:8080</AllowedOrigin>

   <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>OPTIONS</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>

为了进一步调试，我建议按照https://docs.aws.amazon.com/AmazonS3/latest/dev/cors-troubleshooting.html所述的步骤进行操作