React下载按钮可触发下载但文件为空问题求助

核心问题原因 #

• Axios参数传递错误：你将authorization、contentType、responseType作为独立参数传入api.get，但Axios的GET请求仅接受url和单个config对象，多余参数不会被识别，导致responseType: 'blob'未生效，响应数据仍为默认JSON格式，转成Blob后内容为空。
• 无效的请求头设置：contentType中重复定义两个Content-Type头，且前端无需手动设置该头，应由后端返回正确的类型。
• 错误的Blob构造逻辑：用[...files, ...response.data]构造Blob时，files是空数组，response.data若为JSON格式，展开后并非二进制数据，导致Blob内容异常。

具体修复步骤 #

1. 修正Axios请求配置 #

合并所有配置到单个对象中，确保responseType正确生效：

async function downloadBook() {
    try {
        const response = await api.get(
            "api/file/v1/downloadFile/PRESSMAN_Engenharia_de_software_Uma_Abor.pdf",
            {
                headers: {
                    Authorization: `Bearer ${accessToken}`
                },
                responseType: 'blob' // 关键：指定响应为Blob类型
            }
        );
        // 后续下载逻辑
    } catch (error) {
        alert("ERROR: Can't download choosen item, please try again.");
    }
}

2. 简化Blob构造 #

直接使用响应返回的Blob数据构造：

// 替换原Blob构造代码
const blob = new Blob([response.data], { type: response.headers["content-type"] });

3. 清理无用变量 #

删除无意义的状态和变量：

// 移除以下代码
const [files, setFiles] = useState([]);
const contentType = { /* ... */ };
const responseType = { /* ... */ };

4. 优化DOM清理逻辑 #

确保下载后移除临时创建的锚点元素：

downloadLink.click();
document.body.removeChild(downloadLink); // 新增：清理DOM元素
window.URL.revokeObjectURL(downloadLink.href);

验证注意事项 #

• 确认后端返回的响应头包含Content-Type: application/pdf
• 在浏览器开发者工具的Network标签中，检查该请求的Response类型是否为Blob或PDF

内容的提问来源于stack exchange，提问作者Raysa Townsend Carraro