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

Posted 2023-03-04

【中文标题】Amazon S3 图像在 Chrome 中获取 CORS 错误/错误，在 Firefox 中没有错误

【英文标题】：Amazon S3 image fetching CORS Error/Bug in Chrome, no errors in Firefox

【发布时间】：2016-02-24 19:04:12

【问题描述】：

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

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

http://jsfiddle.net/02nojg8w/

正如您在<img> 标签中看到的那样，即使在 Chrome 中也可以正常获取图像。但是，当您尝试通过 Canvas 或 Filereader 进行转换时，它将无法正常工作，并引发以下错误：

画布

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 与来自例如 Wikimedia commons 的图像一起使用，它将在 Chrome 和 Edge 上运行，请参阅下面的 JS Fiddle。

http://jsfiddle.net/hy4wxggx/

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

【参考方案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 中运行。

【讨论】：

我尝试了这些 CORS 设置（我的域是 HTTP），但它没有解决问题。注意：这可能是因为我需要使用 crossOrigin="anonymous" 属性调用图像（用于 html5 画布）

@DeepakJoy 尝试通过禁用缓存来获取图像。在下面查看我的答案。