【解决】axios 下载文件 Failed to read the ‘responseText‘ property from ‘XMLHttpRequest‘

文章讲述了IDM在某些网站无法重复请求同一文件的问题,可能由于浏览器集成插件或下载链接导致。同时,讨论了axios在处理responseType为blob时遇到的问题,指出这可能是由于axios版本过旧。升级axios到1.3.6解决了这个问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要解决以下两个问题

问题一:idm一些网站不允许请求同一文件两次

故障原因:IDM 在发神经

因为它检测到浏览器集成插件未安装,所以诱导你安装。实际上,装了插件问题也会出现。改参数都没用。

1.很可能是你点击网页的 下载链接 有问题(换个网页下载试试,就不提示了),Edge 浏览器一直会欺骗你, Google 浏览器偶会欺骗你。⇒ 如果开发项目,检查后端接口正常

问题二:Uncaught DOMException: Failed to read the ‘responseText’ property from ‘XMLHttpRequest’: The value is only accessible if the object’s ‘responseType’ is ‘’ or ‘text’ (was ‘blob’).
at r.onreadystatechange (http://cdn.staticfile.org/axios/0.1.0/axios.min.js:2:1004)

2.也可能是前端 请求工具 出了问题。比如请求工具

// post、put、patch 等请求
axios.post(url, {...someData}, {responseType: 'blob'})
    .then((res) => {
        //...
    }).catch((err) => {
        //
    })

故障原因:排查一个早上,也参考了 Github 一些仓库的代码,在另一个项目也正常用的,这个语法没有问题。最后才发现,是 axios 版本太 TM 老了。

<!--<script src="//cdn.staticfile.org/axios/0.1.0/axios.min.js"></script>-->
<script src="//cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>

更新到 1.3.6 ,网页点击下载,就正常了。IDM也不报错。

response数据模型

### 使用 Axios 下载文件流 为了实现通过 Axios 下载文件流的功能,可以采用如下方法: 对于 Node.js 环境中的下载操作,可以通过设置 `responseType` 参数为 `"stream"` 来处理响应数据作为流的形式。这允许更高效地管理大文件传输过程。 ```javascript const axios = require('axios'); async function downloadFile(url, destinationPath) { try { const response = await axios.get(url, { responseType: 'stream' }); // 创建写入流到目标路径 const writer = fs.createWriteStream(destinationPath); // 将HTTP流管道化至文件写入流 response.data.pipe(writer); return new Promise((resolve, reject) => { writer.on('finish', resolve); writer.on('error', reject); }); } catch (error) { console.error(`Error downloading file from ${url}: `, error.message); throw error; } } ``` 上述代码展示了如何利用 Axios 的 GET 请求来获取远程资源,并将其保存为本地文件[^2]。 而在前端环境中,则通常会结合 Blob 对象以及浏览器 API 实现文件下载逻辑。下面是一个基于 Vue 或 React 项目的实用工具函数示例,用于发起 POST 请求并触发文件下载行为。 ```javascript import axios from 'axios'; export function fileDownload(options) { const { url, method = 'get', data = null, filename = 'download' } = options; axios({ ...options, url, method, data, responseType: 'blob', }).then(response => { const blob = new Blob([response.data], { type: '' }); if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE and Edge browsers support window.navigator.msSaveBlob(blob, `${filename}.xlsx`); } else { // Create a link element to trigger the download action. const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `${filename}.xlsx`; link.click(); setTimeout(() => URL.revokeObjectURL(link.href), 100); // Clean up after completion } }).catch(error => { console.log('fileDownload Error:', error); }); } ``` 此段代码适用于从前端发送带有参数的数据给服务器接口,接收 Excel 类型或其他格式的二进制文件返回值,并自动启动客户端上的文件保存对话框[^4]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值