XMLHttpRequest 和 S3,CORS 错误
Posted
技术标签:
【中文标题】XMLHttpRequest 和 S3,CORS 错误【英文标题】:XMLHttpRequest and S3, CORS error 【发布时间】:2017-09-06 19:51:59 【问题描述】:我将照片托管在 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”标头 资源。
欢迎提出任何建议。
【问题讨论】:
清除浏览器缓存? 我确实清除了缓存,但仍然没有运气... :-( 【参考方案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 方式,我仍在寻求更好的解决方案。
【讨论】:
如果您找到更好的解决方案,请回帖。我自己也遇到了这个。我什至清除了 Chrome 中的“所有”缓存,但显然这方面仍然被缓存。感谢 Chrome 让我度过了一个小时的生活。 你是我的英雄。我一直在循环更改 CORS 配置,但没有取得任何进展。没有意识到浏览器缓存把事情搞砸了!以上是关于XMLHttpRequest 和 S3,CORS 错误的主要内容,如果未能解决你的问题,请参考以下文章
使用 S3 的 React App 中的 CORS ORIGIN 错误
访问 XMLHttpRequest 时访问 XMLHttpRequest 已被 CORS 策略阻止
为啥浏览器不遵循使用 XMLHTTPRequest 和 CORS 的重定向?
从源访问 XMLHttpRequest 已被 CORS 策略阻止