如何使用axios POST请求配合blob响应类型实现带密码的文件下载

你只需要把请求方法改为POST，将敏感的密码参数放到请求体data中即可，核心修改和完整实现如下：

完整可运行代码 #

axios({
    url: `/api/download/`,
    method: "POST",
    // 参数放到请求体中，不会暴露在URL里
    data: {
        uuid: uuid,
        password: password
    },
    responseType: "blob",
})
.then((response) => {
    // 注意：如果后端返回错误提示（比如密码错误），需要先判断响应类型
    const contentType = response.headers['content-type'];
    // 如果返回的是JSON错误，先解析错误信息
    if (contentType.includes('application/json')) {
        const reader = new FileReader();
        reader.onload = () => {
            const err = JSON.parse(reader.result);
            alert(err.message || '下载失败，请检查密码是否正确');
            self.showLottie = false;
        };
        reader.readAsText(response.data);
        return;
    }

    // 正常文件流走下载逻辑
    const fileURL = window.URL.createObjectURL(new Blob([response.data]));
    const fileLink = document.createElement("a");
    fileLink.href = fileURL;
    fileLink.setAttribute("download", filename);
    document.body.appendChild(fileLink);
    fileLink.click();

    // 清理内存，避免内存泄漏
    document.body.removeChild(fileLink);
    window.URL.revokeObjectURL(fileURL);
    self.showLottie = false;
})
.catch(function (error) {
    self.showLottie = false;
    alert("Download failed");
});

注意事项 #

• 后端接口需要同步调整为支持POST请求，从请求体中读取uuid和password参数
• 上面增加了响应类型判断逻辑，避免把密码错误之类的JSON提示当成二进制文件下载，保存成乱码的无用文件
• 新增了DOM和对象URL的清理逻辑，避免长期运行产生内存泄漏

内容的提问来源于stack exchange，提问作者thomalex