google-chrome - Cross Origin amazon S3 无法使用 chrome

Question

我们的网站有一个问题，chrome 从 amazon 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 从具有远程图像(在亚马逊 S3 服务器上)的 SVG 创建 Canvas ，但 chrome 浏览器返回“没有‘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 中，这不会导致任何问题。

Answer 1

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

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