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方式，我仍然打開任何更好的解決方案。