在使用 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. 创建一个临时的 元素来触发下载 const a = document.createElement('a'); a.href = url; a.download = 'video.mp4'; // 设置下载文件的默认名称 // 6. 将 元素添加到 DOM 并模拟点击，以触发下载 // 某些浏览器可能需要将元素添加到DOM才能触发click事件 document.body.appendChild(a); a.click(); // 7. 下载完成后，移除 元素 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 response.blob(): 此方法将响应体解析为一个 Blob 对象，它代表了不可变的原始数据。这是处理二进制文件（如图片、视频、PDF）的理想方式。URL.createObjectURL(blob): 这是一个非常实用的 API，它为 Blob 或 File 对象创建了一个唯一的 URL。这个 URL 可以像普通 URL 一样在浏览器中使用，例如设置给 的 src 或 的 href。 标签与 download 属性: 创建一个临时的 元素，并设置其 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 进行分块下载和处理，但这会使代码复杂得多，通常在高级场景下才需要。
总结
在使用 Fetch API 下载视频文件时，避免 0 字节文件大小问题的核心在于正确理解和配置 Fetch 请求。关键在于：
避免使用 mode: ‘no-cors’：此模式会使响应不透明，导致无法访问其内容。避免在 GET 请求中设置不必要的 Content-Type 请求头：让服务器在响应中处理文件类型。确保服务器配置了正确的 CORS 策略：如果资源是跨域的，这是成功下载的前提。
遵循上述指导，并结合 response.ok 检查、Blob 对象、URL.createObjectURL() 以及 URL.revokeObjectURL() 的正确使用，你就能可靠地通过 Fetch API 实现客户端视频文件的下载功能。
以上就是解决 Fetch API 下载视频文件大小为 0 字节的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530516.html
微信扫一扫 
支付宝扫一扫 
