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

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

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

出现的背景

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

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

着急了我的乖乖，后面去查了一下原因。。。我这边确实没看到后端返回流文件。。。然后他就改用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掘金原配资源老村长的神器学完直接原地起飞！！！