问题描述
在 JavaScript 中
In javascript
<代码>const image = new Image()image.crossOrigin = '匿名'image.src = 'https://s3.amazonaws.com/ch-static-beta/avatar/user/1a8fdd22d5ec11e784da0e28350150f71512059569.png'
会得到一个错误
http 头是
但是当我使用 curl 并使用此请求标头时，响应将成功.像这样.
But when I use the curl and with this request header, the response will success. like this.
推荐答案
那是缓存问题，和一个 chrome 错误*:
That's a caching issue, and a chrome bug*:
*作为 WONT-FIX 关闭，chrome 开发人员说这本身不是错误，这是服务器的错误配置，应该将允许源头发送到任何请求......相关的 错误报告，也作为 WONT-FIX 关闭.
*Closed as WONT-FIX, chrome devs said it isn't a bug per se, it's a misconfiguration of the server which should send the allow origin headers to any requests... A related bug report, also closed as WONT-FIX.
您可能已经向此图像发出请求，而没有请求 CORS 标头.
You probably already had made a request to this image without requesting for the CORS headers.
当您执行第二个请求时，浏览器将错误地重用缓存的响应.
When you perform the second request, the browser will wrongly reuse the cached response.
var rand = '?'+Math.random();
var no_cors = new Image();
no_cors.onload = loadCORS;
no_cors.src = 'https://s3.amazonaws.com/ch-static-beta/avatar/user/1a8fdd22d5ec11e784da0e28350150f71512059569.png' + rand;
function loadCORS(){
var with_cors = new Image();
with_cors.crossOrigin = 'anonymous';
with_cors.src = no_cors.src;
with_cors.onload = function(){console.log('loaded');};
with_cors.onerror = function(){console.error('failed');};
}所以要解决:[...] 配置您的 S3，使其始终发送跨域标头.*
如需解决方法，请始终加载 crossOrigin 版本.
如需临时修复，请禁用缓存.
So for a fix: [...] Configure your S3 so that it always sends the cross-origin headers.*
For a workaround, always load the crossOrigin version.
For a temp fix, disable caching.
*似乎不可能将 S3 设置为这样做，请参阅 这个极好的答案，Michael - sqlbot，它还提供了其他服务器端解决方法.
*It seems it's not possible to setup S3 to do so, see this excellent answer by Michael - sqlbot, which also provides other server-side workarounds.
这篇关于带有 `crossOrigin="Anonymous"` 的图像标签无法从 S3 加载成功的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，WP2