XMLHttpRequest和S3，CORS错误

Question

我在S3桶上托管我的照片。 我添加了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>
 <ExposeHeader>Accept-Ranges</ExposeHeader>
 <ExposeHeader>Content-Range</ExposeHeader>
 <ExposeHeader>Content-Encoding</ExposeHeader>
 <ExposeHeader>Content-Length</ExposeHeader>
 <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
 <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

在我的html页面中，我试图保存图像，所以我使用的是库： https ： //github.com/tsayen/dom-to-image

domtoimage.toBlob(document.getElementById('my-node'))
.then(function (blob) {
    window.saveAs(blob, 'my-node.png');
});

我收到了CORS错误：

XMLHttpRequest无法加载http：//s3/bucket/path/image.png 。 请求的资源上不存在“Access-Control-Allow-Origin”标头。

任何建议表示赞赏。

Answer 1

经过长时间的调试，我找到了核心问题。 所有S3 CORS配置都已更正，与S3无关。 问题来自浏览器缓存。 这个令人讨厌的缓存阻止了S3响应Access-Control-Allow-Origin'标头作为响应，这就是它导致错误的原因。

解决方案:(这是一个hacky解决方案，但它工作）我在dom-to-image.js的方法getAndEncode中添加了一行代码，以防止浏览器缓存。

function getAndEncode(url) {
        ...
        url += "?"+(new Date()).getTime(); // this line of code made magic.

        return new Promise(function (resolve) {
            ....
            request.open('GET', url, true);
...

再次，这是一个hacky方式，我仍然打开任何更好的解决方案。