这个错误信息“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掘金原配资源 老村长的神器学完直接原地起飞!!!