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

---

在使用 j*ascript 的 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'：此模式允许向其他源发出请求，但会限制 J*aScript 对响应的访问。在这种模式下，即使请求成功，响应对象（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 对象是更简洁且正确的做法。

SONIFY.io

设计和开发音频优先的产品和数据驱动的解决方案

75 查看详情

正确的 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. 创建并点击下载链接: 通过创建一个临时的 标签，设置其 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 字节文件大小的陷阱与正确实践的详细内容，更多请关注其它相关文章！

# 南昌什么网站推广效果好  # 移除  # 转换为  # 当您  # 下载链接  # 自定义  # 表单  # 白云企业搜索SEO网络推广  # 店铺营销推广在哪做好  # 创建一个  # 网站建设新手指南  # 品牌营销推广工作内容  # 网站建设策划案总结  # 微山品牌seo产品  # 黄浦seo优化费用多少  # 营销推广方案翻译怎么写  # 小红书seo链接  # javascript  # 递归  # 您的  # 这是  # 前端应用  # 状态码  # 跨域  # ai  # access  # 字节  # app  # 浏览器  # json  # 前端  # js  # java 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： QQ阅读小说搜索入口地址_QQ阅读小说搜索入口地址搜索在线阅读  J*aScript模块加载器_RequireJS原理分析  谷歌浏览器如何查找和删除恶意软件 谷歌浏览器内置安全清理工具使用教程  抖音如何进行蓝V认证 抖音企业号申请所需资料与流程  动漫之家观看全集库 动漫之家免费资源网地址  电脑桌面图标怎么变大变小_Windows个性化设置第一课【新手入门】  教资成绩怎么查询  TikTok搜索结果不显示怎么办 TikTok搜索刷新与优化方法  基于键值条件高效映射 Pandas DataFrame 多列数据  uc浏览器官网网页版使用 uc浏览器官网免费在线首页  B站怎么快速升级 B站用户等级提升攻略【详解】  抖音号显示企业机构号是什么意思？企业机构号申请条件是什么？  全球各国上班时间表外贸邮件时间  tiktok国际版入口_tiktok官网网页版链接  实时数据流中高效查找最小值与最大值  2025考研成绩查询时间入口分享  NumPy 高性能技巧：基于多列条件查找最近邻行索引的向量化实现  PySimpleGUI中实现键盘按键与按钮事件绑定教程  mysql怎么导入sql文件_mysql导入sql文件的方法与技巧  POKI小游戏在线免费入口链接 POKI小游戏无下载秒玩玩  虫虫助手如何更新游戏  Highcharts雷达图径向轴数值标签实现教程  鲨鱼剧场app金币获取方法  苹果电脑如何快速查看电池状态 苹果电脑电池信息快捷方法  钉钉任务无法提醒如何处理 钉钉任务提醒优化方法  房产|直播|视频号怎么认证开通？|直播|需要什么资质？  windows server2019显卡驱动怎么安装_winserver2019显卡驱动安装与远程桌面优化  花生壳内网映射新方案  空腹吃苹果好吗 苹果空腹摄入指南  sublime如何处理超大文件不卡顿 _sublime打开大日志文件技巧  小红书网页版怎么进 小红书网页版通用入口  红手指专业版app注册教程  J*aScript 数值去小数位处理：多种方法与实践  快手缓存清理方法  12306APP选座怎么选充电位置_12306APP带充电插座座位选择方法与技巧  mysql数据库索引类型有哪些_mysql索引类型解析  感染了幽门螺杆菌一定会导致胃癌吗？蚂蚁庄园今日答案最新11.30  如何定制PrimeNG Sidebar的背景颜色  告别阻塞等待：如何使用GuzzlePromises优雅处理PHP异步操作，提升应用响应速度  《土豆雅思》修改密码方法  HTML中多图片上传与预览：解决ID冲突的专业指南  电子白板帮助菜单使用指南  Excel如何快速合并单元格内容_Excel文本合并与函数操作技巧  百度竞价WAP显示PC链接问题  126手机126邮箱登录_126邮箱手机登录入口官网  BunnyStream TUS视频上传指南：解决401认证错误与参数配置  小米倒班助手添加日历提醒  济南公交卡手机充值指南  多闪APP官方下载安装入口_多闪最新版本获取入口  抖音评论无法发送如何修复 抖音评论功能操作指南 

 2025-10-18