使用fetch api下载文件时，遇到0字节文件大小通常是由于不当的cors模式配置（如`no-cors`阻止响应体访问）和请求头设置不当（如不必要的`content-type`）。本文将深入解析这些常见问题，并提供正确的fetch用法，确保文件能够被成功下载，通过移除或正确配置cors模式并精简请求头，实现可靠的文件下载功能。
在使用JavaScript的fetch方法从URL下载文件时，有时会遇到下载的文件大小为0字节的问题，即使相同的URL在浏览器中可以直接访问和下载。这通常不是URL本身的问题，而是fetch请求的配置，特别是CORS模式和请求头设置不当所致。
核心问题分析与解决方案
导致fetch下载0字节文件的两个主要原因是：
- mode: 'no-cors' 模式的误用
- 请求头中设置了不必要的 Content-Type
我们将逐一详细解释并提供解决方案。
1. 理解 mode: 'no-cors' 的影响
fetch API的 mode 选项定义了请求的CORS模式。当设置为 mode: 'no-cors' 时，它允许跨域请求，但会极大地限制JavaScript对响应的访问权限。在这种模式下，响应被认为是“不透明（opaque）”的，这意味着：
- 你无法访问响应的HTTP状态码（response.status）。
- 你无法访问响应头（response.headers）。
- 最关键的是，你无法访问响应体（response.body），因此 response.blob() 或 response.json() 等方法将返回空或无法访问的数据。
这正是导致下载文件大小为0字节的根本原因。即使服务器成功发送了文件内容，no-cors 模式也阻止了客户端JavaScript读取这些内容。
解决方案：
对于需要访问响应体（如下载文件）的跨域请求，应该：
- 移除 mode: 'no-cors' 选项： 默认情况下，如果请求是跨域的，fetch 会尝试使用 mode: 'cors'。如果服务器配置了正确的CORS策略，这将允许你访问响应体。
- 显式设置为 mode: 'cors'： 尽管通常不是必需的，但你可以明确指定 mode: 'cors' 来确保以CORS模式进行请求。
如果目标服务器没有配置CORS策略来允许你的域访问其资源，那么即使使用 mode: 'cors'，请求也可能失败并抛出CORS错误，而不是返回0字节文件。在这种情况下，你需要联系服务器管理员配置CORS。
2. 移除不必要的 Content-Type 请求头
在 GET 请求中，客户端通常不会向服务器发送请求体。因此，为 GET 请求设置 Content-Type 请求头是多余的，并且在某些情况下甚至可能导致问题。
- Content-Type 请求头通常用于告诉服务器客户端正在发送的请求体的媒体类型（例如，当通过 POST 请求发送JSON数据时，设置为 application/json）。
- 对于文件下载，服务器会在其响应头中设置 Content-Type 来告知客户端它正在发送的文件类型（例如 video/mp4）。客户端无需在请求中指定此头。
解决方案：
对于文件下载的 GET 请求，完全移除 headers 对象，除非你需要传递特定的认证令牌（如 Authorization）或其他自定义头。
修正后的代码示例
综合以上分析，以下是修正后的 downloadVideo 函数：
async function downloadVideo(link) {
try {
// 移除 mode: 'no-cors' 和不必要的 Content-Type 头
const response = await fetch(link);
// 检查响应是否成功
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'video.mp4'; // 设置下载文件名
document.body.appendChild(a); // 将a标签添加到DOM中才能触发click
a.click();
document.body.removeChild(a); // 下载后移除a标签
URL.revokeObjectURL(url); // 释放URL对象
} catch (error) {
console.error('下载视频时发生错误:', error);
}
}
// 示例调用
// downloadVideo('https://rexample'); // 将 'https://rexample' 替换为你的视频URL代码解释：
- const response = await fetch(link);：这是最关键的改动。我们移除了 mode: 'no-cors' 和 headers 对象。fetch 将默认以 cors 模式处理跨域请求，并允许我们访问响应体。
- if (!response.ok)：添加了对HTTP响应状态的检查。response.ok 为 true 表示状态码在 200-299 范围内，是成功的响应。
- const blob = await response.blob();：现在，由于CORS模式正确，我们可以成功地从响应中获取 Blob 对象，它包含了文件的二进制数据。
- 后续步骤保持不变：创建 Object URL，创建 标签，设置 href 和 download 属性，模拟点击下载，最后释放 Object URL。
- document.body.appendChild(a); 和 document.body.removeChild(a);：在某些浏览器环境中，为了确保 a.click() 能够正常触发下载，可能需要将 标签暂时添加到DOM中。
注意事项与最佳实践
- CORS策略： 确保目标服务器配置了正确的CORS策略，允许你的前端应用访问其资源。如果服务器没有配置CORS，即使你的代码是正确的，请求也可能被浏览器阻止。
- 错误处理： 始终使用 try...catch 块来捕获 fetch 请求中可能发生的网络错误或解析错误。
- URL验证： 在调用 downloadVideo 函数之前，务必确认提供的 link 是有效的视频URL。
- 大文件下载： 对于非常大的文件，直接将整个文件加载到内存中的 Blob 可能会消耗大量内存。在这种情况下，可以考虑使用 ReadableStream 进行流式下载，但这会使代码更复杂。
- 用户体验： 考虑在下载过程中提供加载指示器，并在下载完成后给出成功或失败的反馈。
总结
当使用 fetch API 下载文件遇到0字节问题时，核心原因通常在于对CORS模式的误解和不必要的请求头配置。通过移除 mode: 'no-cors' 并精简 GET 请求的 headers，我们可以确保 fetch 能够正确地获取响应体，从而成功下载文件。理解CORS机制对于前端开发中的跨域资源访问至关重要。
