我将照片托管在 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 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 http://s3/bucket/path/image.png。
请求中不存在“Access-Control-Allow-Origin”标头
资源。
任何建议表示赞赏。
经过长时间的调试,我找到了核心问题。所有 S3 CORS 配置均已更正,与 S3 无关。问题来自浏览器缓存。这种烦人的缓存阻止了 S3 响应 Access-Control-Allow-Origin 标头进行响应,这就是它导致错误的原因。
解决方案:(这是一个hacky解决方案,但它有效)
我在方法中添加了一行代码getAndEncode
dom-to-image.js 以防止浏览器缓存。
function getAndEncode(url) {
...
url += "?"+(new Date()).getTime(); // this line of code made magic.
return new Promise(function (resolve) {
....
request.open('GET', url, true);
...
再说一次,这是一种 hacky 方式,我仍在寻求任何更好的解决方案。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)