无法加载响应数据:request content was evicted from inspector cache

849 阅读3分钟

这个错误信息“Failed to load response data: Request content was evicted from inspector cache”通常出现在使用浏览器开发者工具(如Chrome的开发者工具)时,当尝试查看或调试网络请求的响应数据时。它表明浏览器的开发者工具缓存中没有保存该请求的响应数据,可能的原因包括:

  1. 请求响应过大:如果请求的响应数据非常大,浏览器可能会自动从缓存中移除这些数据以节省内存。
  2. 请求响应被服务器标记为不可缓存:服务器可能在响应头中设置了某些标志(如Cache-Control: no-store),指示浏览器不要缓存响应数据。
  3. 请求响应被浏览器开发者工具自动清除:在某些情况下,浏览器开发者工具可能会自动清除缓存中的数据,特别是当浏览器内存紧张时。 解决方法:
  4. 减小请求响应大小:如果可能,尝试减小请求的响应数据大小,例如通过分页或过滤数据。
  5. 检查服务器响应头:查看服务器返回的响应头,确认是否有设置Cache-Control: no-store等标志,如果是,可以尝试与服务器端开发人员沟通,看是否可以修改。
  6. 使用其他工具或方法查看响应数据:可以尝试使用Postman、curl等工具直接发送请求并查看响应数据,或者在代码中添加日志记录,直接在服务器端查看响应数据。 如果问题依然存在,可能需要进一步检查具体的请求和响应细节,以确定具体的原因。

出现的背景

今天在使用 vue3 做一个 get请求的下载一个二进制乱码流文件(主要是太大了文件一百多m)请求时候接口响应成了,但是返回响应结果是

image.png

直接这样懵了,就去问后端 他说没问题。。。接口postman 工具都返回如下了

image.png

着急了我的乖乖,后面去查了一下原因。。。我这边确实没看到后端返回流文件。。。然后他就改用post请求但是也不行,纳闷了。。。然后他又改了参数也是不行,最后我说你看看Nginx是不是限制了,结果还真是;后面改了就好了。。。

前端处理二进制流文件下载的核心代码

// 下载方法
const downloadBinaryFile = (
  binFile,
  fileName,
  blobType = 'application/octet-stream'
) => {
  const blobObj = new Blob([binFile], { type: blobType })
  const downloadLink = document.createElement('a')
  const url = window.URL.createObjectURL(blobObj)

  downloadLink.href = url
  downloadLink.download = fileName
  document.body.appendChild(downloadLink)
  downloadLink.click()

  document.body.removeChild(downloadLink)
  window.URL.revokeObjectURL(url)
}
// 接口处理
export function download(id, filename, config) {
  const userStore = useUserStore()
  let token = userStore.accessToken
  return service
    .get(`/xxxxx/download/${id}`, {
      transformRequest: [
        (params) => {
          return tansParams(params)
        }
      ],
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: 'Bearer ' + token
      },
      responseType: 'blob', // 关键
      ...config
    })
    .then(async (data) => {
      // 一个判断是否是blob的方法
      const isBlob = blobValidate(data.data)
      if (isBlob) {
        // 解析 content-disposition 以获取文件名
        const contentDisposition = data.headers['content-disposition']
        let filename = 'default_filename.xxx' // 默认文件名

        if (
          contentDisposition &&
          contentDisposition.indexOf('attachment') !== -1
        ) {
          const matches = contentDisposition.match(/filename="?(.+)"?/)
          if (matches && matches[1]) {
            filename = matches[1] // 提取的文件名
          }
        }
        downloadBinaryFile(data.data, filename)
      } else {

      }
    })
    .catch((r) => {
      console.error(r)
    })
}

总结

出现这样的问题不要慌,冷静分析分析即可解决。。。前端的代码就这么几行。。。这样返回的二进制流文件就能正常下载了。。。 推荐一个很棒的Nuxt.js掘金原配资源 老村长的神器学完直接原地起飞!!!