Axios请求15MB文件返回200却无法获取base64数据报缓存逐出错误

• 开发者工具的响应缓存存在大小限制：Chrome等主流浏览器的Network面板默认仅缓存最大10MB左右的响应内容，超过阈值的响应会被自动从工具缓存中移除，你看到的failed to load response data request content was evicted from inspector cache报错仅代表开发者工具无法展示响应内容，不代表请求本身执行失败。
• Axios默认的大小限制和响应类型配置问题：Axios默认限制最大响应内容为10MB，且默认将响应当做UTF-8字符串处理，大文件二进制响应如果没有配置对应参数会被直接截断，导致无法生成完整的base64数据。
• 小文件体积在默认限制阈值内，所以不会触发上述问题。

1. 调整Axios请求配置，取消大小限制并指定二进制响应类型：

axios({
  method: 'GET',
  url: '你的接口地址',
  // 指定响应为二进制Blob对象，避免字符串转码损坏数据
  responseType: 'blob',
  // 取消响应内容大小上限，也可设置为大于你文件体积的具体数值
  maxContentLength: Infinity,
  maxBodyLength: Infinity
})

2. 使用FileReader将Blob转为Base64，不要直接读取响应文本：

.then(response => {
  const fileReader = new FileReader()
  fileReader.readAsDataURL(response.data)
  fileReader.onload = () => {
    // 此处即可拿到完整的base64格式文件数据
    const previewData = fileReader.result
    // 后续业务逻辑
  }
})

3. 验证数据完整性的方法：可对比返回的Blob对象的size属性和接口响应头的Content-Length数值，二者一致即说明数据获取完整，无需关注开发者工具的预览报错。
4. 若仍存在问题，可检查服务端是否返回了正确的Content-Length响应头，分片传输（Transfer-Encoding: chunked）的响应同样会导致开发者工具无法预览大文件，不影响实际数据使用。

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