为什么HTML、CSS可跨域加载图片但JS HTTP请求会触发CORS错误

问题原因 #

• 浏览器跨源资源共享（CORS）策略的管控范围仅限JavaScript主动发起的HTTP请求（例如fetch、XMLHttpRequest），要求目标服务端在响应头中返回Access-Control-Allow-Origin字段明确允许当前站点跨域访问，否则浏览器会拦截响应并抛出CORS错误。
• <img>标签加载、CSS background-image引用都属于浏览器允许的被动嵌入资源场景，这类资源默认不受CORS策略限制，不需要服务端额外配置跨域头即可正常加载。
• 你访问的theposterdb站点仅开放了图片的被动跨域引用权限，没有配置允许JS跨域请求的响应头，因此fetch请求会触发CORS报错。

解决方案 #

如果你仅需要校验图片是否可正常加载，完全不需要通过fetch发起请求，直接创建Image对象监听加载状态即可，天然规避CORS限制，示例代码如下：

// 图片校验工具函数
function verifyImage(url, onSuccess, onError) {
  const testImg = new Image();
  // 加载成功回调
  testImg.onload = () => {
    onSuccess?.();
  };
  // 加载失败回调，可在此处替换为自定义替代元素逻辑
  testImg.onerror = () => {
    onError?.();
  };
  // 赋值src触发加载
  testImg.src = url;
}

// 调用示例
verifyImage(
  "https://theposterdb.com/api/assets/11949",
  () => {
    console.log("图片加载正常，可展示原资源");
  },
  () => {
    console.log("图片加载失败，展示自定义替代元素");
  }
);

如果你的业务场景需要获取图片的二进制内容做额外处理，只能通过自有后端服务做代理转发：由后端服务发起请求拉取目标图片资源，再返回给前端，服务端发起的HTTP请求不受浏览器CORS策略限制。

内容的提问来源于stack exchange，提问作者Susccy