javascript - 带有 `crossOrigin="匿名 "` can' t 的图像标签从 S3 加载成功

Question

在javascript中


常量图像=新图像()
image.crossOrigin = '匿名'
image.src = 'https://s3.amazonaws.com/ch-static-beta/avatar/user/1a8fdd22d5ec11e784da0e28350150f71512059569.png'


会得到一个错误

http header 是

但是当我使用 curl 并使用此请求 header 时，响应将成功。像这样。

Answer 1

这是缓存问题，and a chrome bug *:

_{*作为 WONT-FIX 关闭，chrome 开发人员说这本身不是错误，它是服务器配置错误，应该向任何请求发送允许来源 header ...相关的 bug report ，也作为 WONT-FIX 关闭。}

您可能已经在没有请求 CORS header 的情况下对此图像发出了请求。

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

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，使其始终发送跨域 header 。*
解决方法是始终加载 crossOrigin 版本。
对于临时修复，请禁用缓存。

*似乎无法设置 S3 来执行此操作，请参阅 this excellent answer通过 Michael - sqlbot ，它还提供了其他服务器端解决方法。