XMLHttpRequest和S3，CORS錯誤

我在S3存儲桶上託管我的照片。我加入CORS配置S3鬥：XMLHttpRequest和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 cannot load http://s3/bucket/path/image.png . No 'Access-Control-Allow-Origin' header is present on the requested resource.

任何建議表示讚賞。

來源

2017-04-11 franco phong

清除瀏覽器緩存？ –

我確實清除了緩存，但仍然沒有運氣... :-( –

經過長時間的調試，我發現了核心問題。所有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); 
...

再一次，這是一個拙劣的方式，我仍然打開任何更好的解決方案。

來源

2017-05-01 15:38:09

如果您找到了更好的解決方法，請回復此問題，我自己也曾嘗試過，我甚至在Chrome中清除了「全部」緩存，但顯然這是仍然緩存。感謝Chrome爲我的生活留下了一個小時。 – adammenges

XMLHttpRequest和S3，CORS錯誤

回答

相關問題