为什么我可以在 HTML 和 CSS 中访问跨源图像，但不能在 JS HTTP 请求中访问？答案

【问题标题】：Why can I access a cross origin image in HTML and CSS but not in a JS HTTP request?为什么我可以在 HTML 和 CSS 中访问跨源图像，但不能在 JS HTTP 请求中访问？
【发布时间】：2021-10-20 04:42:15
【问题描述】：

我有一个这样的 HTML img 元素：

<img src="https://theposterdb.com/api/assets/11949" />

还有一个像这样的 CSS 类：

div {
  background-image: url(https://theposterdb.com/api/assets/11949);
}

这两种方法都可以在我的网站上显示图像。但是，当我尝试在 JavaScript 中执行以下操作时：

fetch("https://theposterdb.com/api/assets/11949")

我收到 CORS 错误。为什么？我需要在 JS 中获取图像，因为我想检查它是否已成功加载，否则显示自定义替代元素。

【问题讨论】：

因为这就是 CORS 所做的 - 保护资源免遭未经授权的使用 - 它们允许您使用图像，但只能作为图像使用 - 当然，您可以使用 img 标签的 onerror 处理程序来查看如果已加载
您可以尝试img.addEventListener("load", ...) 来检查图像是否已加载。
一种方法是通过您的服务器发送 fetch - 然后 CORS 不适用 - 并且 - 您可以发出 HEAD 请求以最小化响应数据量 - 因为您只是想要一个 200 或 404 响应状态来检查资源是否存在——我不明白你打算如何修复 CSS——但我想你知道你在那里做什么
@Bravo 我不知道服务器可以区分图像元素的 GET 请求和 fetch 调用的 GET 请求。标题中是否有一些元信息使这成为可能？
在你走上这条路之前... CORS周围没有后门 - 唯一的绕过是从您的服务器发出请求...浏览器请求您的服务器，传递要检查的 URL，服务器检查，并返回一个好/坏的指示......这是使用 fetch/xhr 的唯一方法

标签： javascript html css cors

【解决方案1】：

您可以使用事件侦听器来检查图像是否已加载。

HTML

<img id="test">

let test = document.querySelector("#test")
test.addEventListener("load",()=>console.log("image was loaded!"))
test.src = "https://theposterdb.com/api/assets/11949"

【讨论】：

这不能回答问题。
该问题还包括文本I want to check if it was successfully loaded and otherwise display a custom alternative element....也许OP不需要特别知道为什么cors会阻止这种情况，而只需要解决图像加载检查。
是否也有办法检查 CSS 背景图像（如我的 CSS 示例中）？编辑：我相信我找到了答案：stackoverflow.com/a/5058336/16503617