带有`crossOrigin ="匿名"`的Image标签无法从S3加载成功

Question

在javascript中

const image = new Image() image.crossOrigin = 'Anonymous' image.src = 'https://s3.amazonaws.com/ch-static-beta/avatar/user/1a8fdd22d5ec11e784da0e28350150f71512059569.png'

会得到一个错误

http标头是

但是,当我使用curl和使用此请求标头时,响应将成功.像这样.

Answer 1

这是一个缓存问题,还有一个chrome bug*:

_{*关闭为WONT-FIX,chrome devs表示它本身不是一个bug,它是服务器的错误配置,应该将allow origin标头发送到任何请求......一个相关的错误报告,也关闭为WONT-FIX.}

您可能已经向此图像发出过请求而未请求CORS标头.

当您执行第二个请求时,浏览器将错误地重用缓存的响应.

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版本.
对于临时修复,请禁用缓存.

*看来这是不可能的设置S3这样做,看到这个优秀的答案由迈克尔- sqlbot,这也提供了其他的服务器端解决办法.