解决 Fetch API 下载视频文件大小为 0 字节的问题-js教程-PHP中文网

解决 Fetch API 下载视频文件大小为 0 字节的问题

聖光之護

发布： 2025-10-18 10:41:10

原创

694人浏览过

解决 Fetch API 下载视频文件大小为 0 字节的问题

在使用 javascript 的 fetch api 下载视频文件时，如果遇到文件大小为 0 字节的问题，通常是由于 `mode: 'no-cors'` 选项阻碍了响应访问，或设置了不必要的 `content-type` 请求头。本文将详细解析这些常见陷阱，并提供正确的 fetch api 使用方法，确保视频文件能够成功下载。

引言：理解 Fetch API 下载视频的挑战

在 Web 开发中，我们经常需要通过 JavaScript 从远程服务器下载文件，例如视频。Fetch API 提供了一种现代且强大的方式来处理网络请求。然而，开发者在使用 Fetch API 下载视频时，有时会遇到一个令人困惑的问题：下载的文件大小显示为 0 字节，即使原始 URL 在浏览器中可以直接播放和下载。这通常不是因为 URL 有误，而是 Fetch API 的某些配置或浏览器安全策略导致的问题。

问题根源分析：no-cors 模式与不必要的请求头

导致 Fetch API 下载视频文件大小为 0 字节的主要原因通常有两个：不当的 mode 设置和在请求中设置了不必要的 Content-Type 头。

1. mode: 'no-cors' 的影响

当你在 fetch 请求中设置 mode: 'no-cors' 时，其目的是允许向第三方域发送请求，而无需遵守严格的 CORS（跨域资源共享）策略。然而，这种模式有一个重要的副作用：它会限制 JavaScript 对响应内容的访问。在这种模式下，响应对象会被标记为 opaque（不透明），这意味着你无法读取其状态码、头部信息，也无法通过 response.blob() 或 response.json() 等方法访问其具体内容。

虽然 no-cors 模式允许请求成功发送并接收到响应，但由于响应是“不透明”的，response.blob() 方法实际上会返回一个空的 Blob 对象，从而导致最终下载的文件大小为 0 字节。这与浏览器直接访问 URL 下载文件时的行为不同，浏览器在直接下载时不会受到 opaque 响应的限制。

2. Content-Type 请求头的误用

在尝试下载文件时，有时开发者会在 fetch 请求的 headers 中手动设置 Content-Type: 'video/mp4'。对于文件下载而言，这个请求头通常是不必要且可能产生误导的。Content-Type 头主要用于告知服务器请求体的数据类型（例如，当你 POST 或 PUT 数据时）。而对于 GET 请求下载文件，服务器会根据其自身的文件类型识别，在响应中通过 Content-Type 告知客户端返回的数据类型。在请求中设置它，不仅不会帮助下载，反而可能在某些情况下干扰服务器的正常处理。

正确实现：优化 Fetch API 请求下载视频

要解决 0 字节下载问题，关键在于移除上述两个不当的配置。

文小言

百度旗下新搜索智能助手，有问题，问小言。

查看详情

1. 移除 mode: 'no-cors'

fetch 请求的默认 mode 是 cors。在 cors 模式下，如果服务器配置了正确的 CORS 策略（例如，通过 Access-Control-Allow-Origin 响应头允许你的源进行访问），你就可以完全访问响应内容。这是下载跨域资源时应采用的正确模式。如果服务器不允许跨域，那么即使不设置 no-cors，请求也会因 CORS 策略而失败，但至少你会得到一个可识别的错误，而不是一个 0 字节的文件。

2. 移除不必要的 headers

对于简单的文件下载（GET请求），通常无需在请求中手动设置 Content-Type 或其他复杂的请求头。让浏览器和服务器自行处理这些细节即可。

示例代码

以下是经过优化后的 Fetch API 下载视频文件的正确实现：

async function downloadVideo(link) {
  try {
    // 1. 发起 fetch 请求。默认 mode 为 'cors'，且无需设置不必要的 Content-Type 请求头。
    const response = await fetch(link);

    // 2. 检查响应是否成功 (HTTP 状态码 200-299)
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态码: ${response.status}`);
    }

    // 3. 将响应体读取为 Blob 对象
    const blob = await response.blob();

    // 4. 创建一个指向 Blob 对象的 URL
    const url = URL.createObjectURL(blob);

    // 5. 创建一个临时的 <a> 元素来触发下载
    const a = document.createElement('a');
    a.href = url;
    a.download = 'video.mp4'; // 设置下载文件的默认名称

    // 6. 将 <a> 元素添加到 DOM 并模拟点击，以触发下载
    // 某些浏览器可能需要将元素添加到DOM才能触发click事件
    document.body.appendChild(a); 
    a.click();

    // 7. 下载完成后，移除 <a> 元素
    document.body.removeChild(a);

    // 8. 释放之前创建的 URL 对象，防止内存泄漏
    URL.revokeObjectURL(url);

    console.log('视频下载成功！');
  } catch (error) {
    console.error('下载视频时发生错误:', error);
    // 可以在此处添加用户友好的错误提示，例如：
    // alert('视频下载失败，请稍后再试或检查网络连接。');
  }
}

// 示例调用（请替换为你的视频链接）
// downloadVideo('https://your-video-url.mp4');

登录后复制

代码解析与注意事项

fetch(link): 这是最简洁的 Fetch 请求方式。它默认使用 GET 方法和 cors 模式，通常能够满足下载需求。
response.ok 检查: 在处理响应之前，始终检查 response.ok 属性（等同于 response.status >= 200 && response.status < 300）。这有助于捕获非成功的 HTTP 响应，例如 404 Not Found 或 500 Internal Server Error。
response.blob(): 此方法将响应体解析为一个 Blob 对象，它代表了不可变的原始数据。这是处理二进制文件（如图片、视频、PDF）的理想方式。
URL.createObjectURL(blob): 这是一个非常实用的 API，它为 Blob 或 File 对象创建了一个唯一的 URL。这个 URL 可以像普通 URL 一样在浏览器中使用，例如设置给 <img> 的 src 或 <a> 的 href。
<a> 标签与 download 属性: 创建一个临时的 <a> 元素，并设置其 href 为 createObjectURL 生成的 URL，然后设置 download 属性来指定下载的文件名。通过模拟点击这个链接，浏览器会触发文件下载。
URL.revokeObjectURL(url): 非常重要！ createObjectURL 创建的 URL 会一直存在于内存中，直到文档卸载。为了避免内存泄漏，一旦不再需要这个 URL（例如，文件下载已触发），就应该调用 URL.revokeObjectURL() 来释放它。
CORS 策略: 尽管我们移除了 no-cors，但如果你的视频文件托管在与你的网页不同的域上，服务器仍然需要配置 Access-Control-Allow-Origin 响应头，以允许你的网页进行跨域请求。如果服务器没有正确配置 CORS，fetch 请求仍会因安全策略而失败，并在控制台中报告 CORS 错误。
错误处理: try...catch 块对于健壮的代码至关重要。它能捕获网络连接问题、HTTP 错误或 Blob 读取错误，并允许你优雅地处理这些情况，例如向用户显示错误消息。
大型文件处理: 对于非常大的视频文件，一次性将整个文件加载到内存中（通过 response.blob()）可能会导致内存占用过高或性能问题。对于这种情况，可以考虑使用 ReadableStream 进行分块下载和处理，但这会使代码复杂得多，通常在高级场景下才需要。