在不实际抓取的情况下如何检查抓取响应状态？

2024-03-09 13:47:57

## 如何在不实际抓取的情况下检查抓取响应状态

简介

在现代 Web 开发中，我们经常需要在 JavaScript 中动态获取资源。为了确保获取成功，检查响应状态至关重要。但是，直接抓取整个页面并不是总是一个理想的解决方案。本文将介绍如何使用“预检请求”技术在不实际抓取的情况下检查抓取响应状态。

什么是预检请求？

预检请求是一种 HTTP 请求，允许客户端在实际发送请求之前检查服务器对特定请求方法的支持情况。它是一种“OPTIONS”请求，用于获取有关目标资源的元数据，而不实际获取资源本身。

如何使用预检请求？

要使用预检请求检查响应状态，可以使用 fetch() 函数的 init 对象的 mode 选项。通过将 mode 设置为 no-cors，我们可以阻止跨域请求，并确保服务器仅返回预检请求的响应状态。

代码示例

以下代码示例演示了如何使用预检请求检查响应状态：

const links = ['https://example.com/video1.mp4', 'https://example.com/video2.mp4', 'https://example.com/video3.mp4'];

links.forEach(async (link, index) => {
  // 创建预检请求
  const preflightRequest = new Request(link, {
    method: 'OPTIONS',
    mode: 'no-cors', // 阻止跨域请求
  });

  // 发送预检请求
  const preflightResponse = await fetch(preflightRequest);

  // 检查响应状态
  if (preflightResponse.status === 200) {
    console.log(`Link #${index + 1}: ${link}`);
  } else {
    console.log(`Link #${index + 1}: FAILED`);
  }
});

注意事项

并非所有服务器都支持预检请求，因此在某些情况下此方法可能无法正常工作。
预检请求本身会产生一些开销，因此如果需要检查大量链接，则可能不是最佳解决方案。
如果你确实需要抓取整个页面，可以使用 fetch() 函数的 arrayBuffer() 或 blob() 方法来仅获取响应的元数据，而无需下载实际内容。

替代方案

除了预检请求，还有其他替代方案可以用来检查抓取响应状态：

使用 HEAD 请求： 与 OPTIONS 请求类似，HEAD 请求也可以用于获取有关目标资源的元数据，而无需实际获取资源本身。然而，HEAD 请求不适用于所有服务器。
使用 XMLHttpRequest： XMLHttpRequest 对象提供了 getResponseHeader() 方法，它可以用来获取响应标头，包括响应状态。但是，XMLHttpRequest 是一个过时的技术，不再建议使用。