在使用 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
微信扫一扫 
支付宝扫一扫 
