使用 Fetch API 下载视频：避免 0 字节文件大小的陷阱与正确实践

在使用 javascript 的 fetch api 下载视频时，有时会遇到文件大小为 0 字节的问题。这通常是由于 mode: 'no-cors' 设置不当或请求头中不必要的 content-type 声明所致。本文将深入解析这些常见误区，并提供一套经过优化的下载方案，确保您能成功获取完整视频文件。

理解 Fetch API 的跨域限制与 no-cors 模式

当您尝试使用 Fetch API 从不同源（domain, protocol, port）的服务器下载资源时，浏览器会受到同源策略（Same-Origin Policy）的限制。为了允许跨域请求，服务器需要配置跨域资源共享（CORS）策略。

fetch 请求中的 mode 选项用于控制请求的跨域行为。

• mode: 'cors'：这是默认模式，用于标准跨域请求。如果服务器配置了正确的 CORS 头部，浏览器将允许访问响应。
• mode: 'no-cors'：此模式允许向其他源发出请求，但会限制 JavaScript 对响应的访问。在这种模式下，即使请求成功，响应对象（Response）的某些属性（如 body、status、headers）也会被“不透明化”（opaque），这意味着您无法通过 response.blob()、response.json() 等方法读取其内容。当您试图读取不透明响应的 blob 时，结果往往是一个空的 Blob 对象，从而导致下载文件大小为 0 字节。

因此，当您需要读取响应体（例如将其转换为 Blob 并下载）时，绝不能使用 mode: 'no-cors'。如果目标服务器支持 CORS，您应该省略 mode 选项（默认即为 cors），或者明确设置为 mode: 'cors'。

请求头设置的常见误区

在进行 GET 请求以下载文件时，通常不需要在请求中设置 Content-Type 头部。Content-Type 头部主要用于告知服务器请求体（例如 POST 请求中的数据）的类型。对于一个简单的 GET 请求，浏览器会自动处理必要的头部信息。

如果您在 GET 请求中手动设置 Content-Type: 'video/mp4'，这不仅是多余的，有时还可能因为服务器不期望或不处理此头部而导致意外行为。服务器在响应中会发送正确的 Content-Type 头部，告知客户端它正在发送什么类型的数据。因此，在下载视频的 GET 请求中，移除自定义的 headers 对象是更简洁且正确的做法。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

正确的 Fetch API 视频下载实践

结合上述分析，一个能够成功下载视频的 Fetch API 函数应该避免 mode: 'no-cors' 和不必要的请求头。以下是优化后的代码示例：

async function downloadVideo(link) {
  try {
    // 1. 发起 Fetch 请求
    // 移除 mode: 'no-cors' 和自定义 headers
    // 默认 mode 为 'cors'，允许访问响应体
    const response = await fetch(link);

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

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

    // 4. 创建一个临时的 URL
    const url = URL.createObjectURL(blob);

    // 5. 创建一个隐藏的下载链接
    const a = document.createElement('a');
    a.href = url;
    a.download = 'video.mp4'; // 设置下载文件名
    document.body.appendChild(a); // 将链接添加到DOM，使其可点击

    // 6. 模拟点击下载链接
    a.click();

    // 7. 清理：释放创建的 URL 和移除 DOM 元素
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  } catch (error) {
    console.error('下载视频时发生错误:', error);
    // 可以在这里添加用户友好的错误提示
    alert('视频下载失败，请稍后再试或联系管理员。');
  }
}

// 示例调用
// downloadVideo('https://rexample'); // 将 'https://rexample' 替换为您的视频链接

代码解析：

1. const response = await fetch(link);: 这是核心改动。通过移除 mode: 'no-cors' 和 headers 对象，我们允许 fetch 在默认的 cors 模式下运行，并由浏览器自动处理必要的请求头。这确保了响应体是可读的。
2. if (!response.ok): 这是一个重要的错误处理步骤。response.ok 属性表示响应的 HTTP 状态码是否在 200-299 范围内。如果不是，说明请求本身可能就失败了（例如 404 Not Found, 500 Internal Server Error），此时尝试读取 blob 可能会出错。
3. const blob = await response.blob();: 将可读的响应体转换为 Blob 对象。Blob 对象代表了不可变的、原始数据的类文件对象。
4. URL.createObjectURL(blob);: 创建一个 DOMString，其中包含一个可用于表示 Blob 对象的 URL。这个 URL 是临时的，并且只在当前文档的生命周期内有效。
5. 创建并点击下载链接: 通过创建一个临时的 <a> 标签，设置其 href 为 createObjectURL 生成的 URL，并设置 download 属性指定下载的文件名，然后模拟点击，即可触发浏览器下载文件。
6. URL.revokeObjectURL(url);: 在下载完成后，务必调用 URL.revokeObjectURL() 来释放之前创建的对象 URL。这可以避免内存泄漏，因为浏览器会为每个 createObjectURL 调用在内存中保留一个引用。

总结与注意事项

• CORS 配置至关重要：如果您的视频源与前端应用不在同一个域，请确保视频服务器已正确配置了 CORS 头部（例如 Access-Control-Allow-Origin: * 或指定您的前端域名），否则 fetch 请求仍可能因跨域策略而失败。
• 错误处理：在实际应用中，应加强 try...catch 块内的错误处理，向用户提供清晰的反馈，例如下载进度、下载失败原因等。
• 大文件下载：对于非常大的文件，直接在浏览器中一次性下载到内存可能会消耗大量资源。可以考虑使用流式下载（response.body.getReader()）或分块下载的策略，但这会增加代码的复杂性。
• 用户体验：在下载过程中，可以显示加载指示器，并在下载完成后提供成功提示。

遵循这些最佳实践，您将能够更可靠地使用 Fetch API 在 Web 应用中实现视频或其他文件的下载功能，避免 0 字节文件大小的问题。

以上就是使用 Fetch API 下载视频：避免 0 字节文件大小的陷阱与正确实践的详细内容，更多请关注php中文网其它相关文章！