Question

有一个错误或错误，在获取图像时，可能很容易通过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。 / p>

http://jsfiddle.net/hy4wxggx/

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

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

0 个答案: