3

我们的网站出现问题，使用 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 浏览器返回“请求的资源上不存在‘Access-Control-Allow-Origin’标头。” 执行此代码后出现错误：

 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 中，这不会导致任何问题。

4

1 回答 1

3

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

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

于 2017-11-17T22:04:21.113 回答