如何在JavaScript中捕获图片请求返回的404错误信息？

这个问题我之前也碰到过，咱们一步步拆解解决：

一、先搞定img的error事件不触发的问题 #

你之前的代码大概率是事件监听顺序错了：如果先设置img.src再绑定error事件，浏览器可能已经触发了错误事件，但此时你的监听还没挂载上，自然捕获不到。调整顺序就能解决：

var url2 = 'https://vechainstats.com/nft/vereapers/2576/'; 
var img = document.createElement('img'); 

// 第一步：先绑定error事件，再设置src
img.addEventListener('error', function() {
  console.log('图片加载失败（大概率是404，但无法直接拿到状态码）');
});

// 第二步：设置图片地址
img.src = url2;

不过要注意：浏览器出于安全限制，不会把HTTP响应状态码（比如404）暴露给img的error事件，这个方法只能知道加载失败，无法直接确认是404。

二、获取404状态码的两种方案 #

如果必须明确拿到404状态，得用XHR或Fetch，但要解决CORS/CORB的限制：

情况1：目标服务器允许CORS #

如果目标域名配置了允许你当前域名的CORS响应头，可以直接用XHR请求获取状态码：

var url2 = 'https://vechainstats.com/nft/vereapers/2576/';
var xhr = new XMLHttpRequest();

xhr.open('GET', url2, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 404) {
      console.log('请求返回404错误');
    } else {
      console.log(`请求返回状态码：${xhr.status}`);
    }
  }
};

xhr.send();

用Fetch的话写法类似，即使碰到CORB（跨域资源阻止），状态码依然能正常获取：

fetch('https://vechainstats.com/nft/vereapers/2576/')
  .then(response => {
    if (!response.ok) {
      console.log(`请求失败，状态码：${response.status}`); // 这里能拿到404
    }
  })
  .catch(err => {
    console.log('请求被CORS/CORB拦截');
  });

情况2：目标服务器不允许CORS #

如果目标服务器没配置CORS，前端直接请求会被浏览器拦截，这时候只能通过后端代理绕开：

• 搭建一个自己的后端接口，让后端去请求目标URL，然后把响应状态码返回给前端
• 前端请求这个后端接口（同源请求），就不会有CORS问题，能正常拿到状态码

举个Node.js+Express的后端代理示例：

// Node.js 后端代码示例
const express = require('express');
const fetch = require('node-fetch');
const app = express();

app.get('/proxy-image', async (req, res) => {
  const targetUrl = req.query.url;
  try {
    const response = await fetch(targetUrl);
    res.status(response.status).json({ status: response.status });
  } catch (err) {
    res.status(500).json({ error: '请求失败' });
  }
});

app.listen(3000);

前端请求代理接口的代码：

const targetUrl = 'https://vechainstats.com/nft/vereapers/2576/';
fetch(`/proxy-image?url=${encodeURIComponent(targetUrl)}`)
  .then(response => response.json())
  .then(data => {
    if (data.status === 404) {
      console.log('目标URL返回404');
    }
  });

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