使用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机制对于前端开发中的跨域资源访问至关重要。
以上就是解决Fetch下载0字节文件问题：CORS模式与请求头配置指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530514.html
微信扫一扫 
支付宝扫一扫 
