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

Question

有一个错误或错误，在获取图像时很可能可以通过 Amazon S3 中的配置选项修复。 我在Stack Overflow和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.

文件阅读器

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.

本质上，当在 Windows 系统中使用来自 Chrome 和 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>

允许任何标题，然后我将用于访问文件的 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>