在使用 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 字节文件大小的问题。
