使用 CORS 问题从 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

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

Axios 很可能会在 GET 之前发出 OPTIONS 请求。请务必将 OPTIONS 操作添加到您在 Amazon S3 上的 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 中描述的步骤进行操作