如何检查跨域的 js 中是否存在图像

在开发中，由于浏览器的同源策略，跨域的 js 中访问其他域名下的图片会受到限制。如何检查跨域的 js 中是否存在图像？下面是一些方法：

方法一：使用 fetch API

使用 fetch 方法可以请求跨域的资源，并且可以检查返回类型是否为 image。如果存在图像，则返回 Blob 对象。

fetch('https://example.com/image.jpg')
  .then(response => {
    if (response.type === 'image/jpeg') {
      console.log('存在图像');
      return response.blob();
    } else {
      console.log('不存在图像');
    }
  })
  .then(blob => {
    // 处理 Blob 对象
  })
  .catch(error => console.error(error));

方法二：使用 XMLHttpRequest 对象

使用 XMLHttpRequest 对象可以请求跨域的资源，并且可以检查返回类型是否为 image。如果存在图像，则返回 Blob 对象。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/image.jpg', true);
xhr.responseType = 'blob';
xhr.onload = function() {
  if (xhr.status === 200 && xhr.response.type === 'image/jpeg') {
    console.log('存在图像');
    const blob = xhr.response;
    // 处理 Blob 对象
  } else {
    console.log('不存在图像');
  }
};
xhr.onerror = function() {
  console.error(xhr.statusText);
};
xhr.send();

方法三：使用 Image 对象

使用 Image 对象可以检查跨域的图片的加载情况。如果图片加载成功，则说明存在图像。

const img = new Image();
img.onload = function() {
  console.log('存在图像');
};
img.onerror = function() {
  console.log('不存在图像');
};
img.src = 'https://example.com/image.jpg';

注意，使用 Image 对象只能检查图片是否存在，不能直接返回图片数据。

以上是三种常用的检查跨域的 js 中是否存在图像的方法。根据实际场景选择合适的方法，可以有效避免跨域资源的访问限制。