Amazon S3 图像在 Chrome 中获取 CORS Error/Bug，在 Firefox 中没有错误

Question

存在错误或错误，在获取图像时很可能可以通过 Amazon S3 中的配置选项修复。我在 Stack Overflow and the AWS Forums 中看到了关于此的参考。大多数人没有做的是让复制变得容易，下面的小提琴应该这样做，所以这很容易想象。

这是一个 JS Fiddle，它连接到我们当前实例中的图像：

http://jsfiddle.net/02nojg8w/

在<img>标签里面可以看到，即使在Chrome里面也能正常抓取图片。但是，当您尝试通过 Canvas 或 Filereader 进行转换时，它将不起作用，并抛出以下错误：

Canvas

Image from origin 'https://siga-pmx.s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

文件Reader

XMLHttpRequest cannot load https://siga-pmx.s3.amazonaws.com/digitalization/1448213569280_saya_pixel.png. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

基本上，当使用 Chrome 和 Windows 系统中的 Chromium 的请求加载图像时，请求将失败，在 Microsoft Edge 中也会失败。我已经用多台 Windows 7 和 Windows 10 台机器确认了这一点。但是在这些相同的机器上，如果您使用 Firefox 执行相同的请求，它将起作用。朋友无法在 OS X Chrome/Chromium.

上复制此内容

我们使用的初始配置是这样的：

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

在尝试了一些处理类似问题的 Stack Overflow 答案后，我们切换到这个：

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

您可能认为这可能是浏览器范围的问题，但是，如果我们将相同的 JSFiddle 与来自维基共享资源的图像一起使用，它将在 Chrome 和 Edge 上运行, 看下面的JS Fiddle.

http://jsfiddle.net/hy4wxggx/

如果我们想解决这个问题，我们的 CORS 配置应该如何？或者另一个可行答案的选择是：我们将如何编辑我们的 Canvas JavaScript 方法，以便它正确地获取这些图像？

Answer 1

设法解决了这个问题。首先，我将 S3 CORS 配置更改为以下内容：

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

允许任何 Header，然后我将我们用来访问文件的 URL 从 'https' 切换到 'http'。

Https即使是上面的配置还是会报错，必须使用http。

之后 Chrome/Chromium 一切正常。

Answer 2

对于 safari 修复，在 s3 存储桶的 cors 配置中的 allow 方法中添加 head。所以看起来像这样

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

Amazon S3 图像在 Chrome 中获取 CORS Error/Bug，在 Firefox 中没有错误

Amazon S3 image fetching CORS Error/Bug in Chrome, no errors in Firefox

javascript

amazon

google-chrome

amazon-s3

cors