Cross Origin amazon S3 无法使用 chrome答案

【问题标题】：Cross Origin amazon S3 not working using chromeCross Origin amazon S3 无法使用 chrome
【发布时间】：2014-11-26 05:48:12
【问题描述】：

我们的网站出现问题，使用 chrome 从亚马逊 S3 加载图像时 crossOrigin 属性设置为 "Anonymous"。

我们的 S3 服务器设置为：

<?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>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
        <ExposeHeader>x-amz-request-id</ExposeHeader>
        <ExposeHeader>x-amz-id-2</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

我正在使用 canvg.js 从具有远程图像的 SVG 创建画布（在亚马逊 S3 服务器上），但 chrome 浏览器返回“No 'Access-Control-Allow-Origin' header 存在于请求的资源上。”执行此代码后出错：

 this.img = document.createElement('img');
            var self = this;
            this.img.onload = function() { self.loaded = true; }
            this.img.onerror = function() { if (typeof(console) != 'undefined')                                            
            console.log('ERROR: image "' + href + '" not found'); self.loaded = true; } }
            if (svg.opts['useCORS'] == true) { 
                                this.img.crossOrigin = 'Anonymous'; }
            this.img.src = href;

在 Firefox 和 IE 中，这不会导致任何问题。

【问题讨论】：

您“认为”这不是 S3 设置的问题吗？您不应该发布您的 S3 CORS 配置吗？
我刚刚添加了它...我认为这不是 S3 设置的问题，因为它适用于其他浏览器

标签： google-chrome amazon-s3 cors anonymous canvg

【解决方案1】：

这是 Chrome 缓存请求的问题。 Here 是关于该主题的讨论。

只需将以下内容添加到您尝试从不同域 crossorigin="anonymous" 访问资源的所有 HTML 标记中，如 MDN here 所述。

【讨论】：