Javascript 获取已加载的img的错误事件

我有一个函数正在等待img标记的加载或错误事件。有时，我会得到一个错误事件，img标记的naturalWidth和naturalHeight都等于零。奇怪的是，查看chrome开发者工具中的网络选项卡，图像请求的状态代码为302，重定向请求返回的状态为200。（实际映像存储在S3上，但我们的服务器重定向到S3）

此外，问题中的实际显示，但不正确，因为我使用naturalWidth和naturalHeight来计算图像的一些CSS属性

我还收到一个错误，说“跨源资源共享策略拒绝跨源映像加载”。我不确定这是否相关，或者它是否引用同一映像

我特别困惑，因为它只发生在一个系列的第一张图片上，而且只是偶尔发生

有人知道发生了什么，或者至少知道如何找出导致错误事件的原因吗

更新：

S3 bucket和服务器重定向都配置为支持CORS。但是，无论何时发生这种情况，浏览器都会使用没有Access Control Allow Origin标头的缓存图像。我相信，在应用程序的早期，我们在不使用CORS的情况下请求一个图像，因此没有标题，然后在这一点上我们使用CORS，但是我们得到了一个缓存版本，没有使用CORS检索。但是我仍然不知道如何解决这个问题。我不是100%确定这就是正在发生的事情，尽管我非常确定这与缓存和跨源请求有关

---

我还不明白为什么我会得到同一个img标签的error和load事件，而图像实际上会显示出来。此外，即使调用了加载事件处理程序，this.complete为false，this.naturalWidth和this.naturalHeight为零

CORS是一种允许网站向另一个独立域发出请求的技术。在您的例子中，这是从web服务器到AmazonS3服务器的连接。您需要允许来自域的请求通过S3资源

我相信你会在这里找到你需要的信息：

---

希望有帮助

来自W3C规范的HTTP响应代码：

---

10.3.3 302发现

请求的资源临时驻留在不同的URI下。由于重定向有时可能会被更改，因此客户端应该继续使用请求URI来处理将来的请求。只有在缓存控件或Expires标头字段指示时，此响应才可缓存

临时URI应该由响应中的Location字段提供。除非请求方法是HEAD，否则响应的实体应该包含一个简短的超文本注释，并带有指向新URI的超链接

---

现在，这意味着302是重定向，但浏览器可能会缓存新的URL，并在内部将以下请求转换为该URL。超时后，浏览器将重试原始URL，而不在内部重定向请求。因此，误差或多或少出现在随机间隔上

跨源策略是在更安全的浏览器（现代Chrome和许多其他浏览器）和更安全的Javascript配置文件（如ES5）上实现的

---

此策略认为跨域请求是危险的，即使您只想加载映像。以下是众多示例中的一个：

我发现出现跨源错误的原因是，当我在div的background image CSS属性中使用图像时，出现了缓存响应（如更新中所述）。但是，我把这个打开，因为我仍然不明白为什么我得到一个错误事件，即使图像是明显可见的。