原创投稿
  1. 创想鸟首页
  2. 用户投稿

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

程序猿 • • 用户投稿

使用 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 对象是更简洁且正确的做法。

正确的 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' 替换为您的视频链接

代码解析：

const response = await fetch(link);: 这是核心改动。通过移除 mode: ‘no-cors’ 和 headers 对象，我们允许 fetch 在默认的 cors 模式下运行，并由浏览器自动处理必要的请求头。这确保了响应体是可读的。if (!response.ok): 这是一个重要的错误处理步骤。response.ok 属性表示响应的 HTTP 状态码是否在 200-299 范围内。如果不是，说明请求本身可能就失败了（例如 404 Not Found, 500 Internal Server Error），此时尝试读取 blob 可能会出错。const blob = await response.blob();: 将可读的响应体转换为 Blob 对象。Blob 对象代表了不可变的、原始数据的类文件对象。URL.createObjectURL(blob);: 创建一个 DOMString，其中包含一个可用于表示 Blob 对象的 URL。这个 URL 是临时的，并且只在当前文档的生命周期内有效。创建并点击下载链接: 通过创建一个临时的 标签，设置其 href 为 createObjectURL 生成的 URL，并设置 download 属性指定下载的文件名，然后模拟点击，即可触发浏览器下载文件。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 字节文件大小的陷阱与正确实践的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530498.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
在 WebRTC 中，JavaScript 如何管理端到端的音视频数据传输？
上一篇 2025年12月20日 22:02:33
React中动态点击分类触发Axios API调用的最佳实践
下一篇 2025年12月20日 22:02:42

相关推荐

发表回复

登录后才能评论
关注微信