Question

我有一个Amazon S3存储桶设置来提供静态图像文件，例如：

https://s3.amazonaws.com/my-uploaded-files/images/cat.jpg

cat

如您所见，文件托管和URL可以正常工作。我已将所有内容设置为公开，并且还具有CORS配置：

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

我还在GitHub Pages上托管了一个网页，该网页使用JavaScript来获取图像，显示图像以及对基础图像数据进行一些处理。这是一个简化的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>S3 Image Test</title>
    <script>
    function loadImage(){
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      var image = new Image();
      image.onload = function() {
        context.drawImage(image, 0, 0);
        var imageData = context.getImageData(0, 0, image.width, image.height);
        console.log('data: ' + imageData);
      };
      image.crossOrigin = 'Anonymous';
      image.src = 'https://s3.amazonaws.com/my-uploaded-files/images/cat.jpg';
    }
    </script>
  </head>
  <body onload="loadImage()">
    <canvas id="myCanvas" style="width: 500px; height:500px;"></canvas>
  </body>
</html>

您可以在https://kevinworkman.github.io/GitHubPagesTest/上看到这一点

在装有Chrome和Internet Explorer的Windows笔记本电脑上，此功能正常运行。我在浏览器中看到图像，并且看到图像数据正在打印到控制台。

但是，如果我在Android Chrome浏览器中打开URL，则只会出现空白屏幕。如果我将手机连接到Android Studio并查看Logcat，则会看到此错误：

07-14 18:45:16.797 14951-14951/? I/chromium: [INFO:CONSOLE(0)] "Access to Image at 'https://s3.amazonaws.com/my-uploaded-files/images/cat.jpg' from origin 'http://kevinworkman.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://kevinworkman.com' is therefore not allowed access.", source: http://kevinworkman.com/GitHubPagesTest/ (0)

我了解此错误通常意味着什么，但我已经确认我的CORS配置正确，并且可以在其他浏览器中使用。

我已经在两种不同的Android设备（Pixel 1和Pixel 2）上进行了尝试，它们都表现出相同的行为。我已经在http和https上进行了尝试，并且两者的行为相同。

它在Android Firefox中也可以正常工作。

我没有使用cloudflare或CDN或其他任何东西。

我的配置有问题吗？ Android Chrome的行为与其他浏览器不同是有原因的吗？

我也很想知道使用iOS设备的用户的声音，因为我无法使用它们进行测试。

S3上托管的图片仅在Android chrome上具有CORS错误

0 个答案: