我要评论使用axios获取不到响应头content-disposition
项目中后端返回的文件流
前端需要拿到响应头里的content-disposition字段的值，从中获取文件名
在控制台headers中可以看到相关的字段和文件名，但是在axios里面却获取不到
如果想要让客户端访问到相关信息，服务器不仅要在heade里添加，还要将它们在 access-control-expose-headers 里面列出来
response.setheader("access-control-expose-headers", "content-disposition");
response.setheader("content-disposition", "attachment; filename=" + downloadname);这两行代码是java中用于设置http响应头的，通常在web开发中，特别是当涉及到文件下载时，会用到这样的设置。
response.setheader("access-control-expose-headers", "content-disposition");这行代码设置了access-control-expose-headers响应头。这个响应头与跨域资源共享（cors）有关。默认情况下，浏览器不允许跨域请求的javascript代码访问某些响应头信息。但是，通过access-control-expose-headers，服务器可以告诉浏览器哪些额外的头信息可以被javascript代码访问。
在这里，服务器告诉浏览器，content-disposition这个响应头是可以被javascript代码访问的。这通常在你需要在前端处理或检查文件的下载信息时非常有用。
response.setheader("content-disposition", "attachment; filename=" + downloadname);这行代码设置了content-disposition响应头。content-disposition响应头指示浏览器如何处理响应的内容。当它的值设置为attachment时，它告诉浏览器将响应的内容视为附件，而不是在页面上显示。这通常用于触发文件的下载。
filename参数指定了下载文件的名称。这里，它被设置为downloadname的值，这意味着你可以动态地设置下载文件的名称。
例如，如果downloadname的值是"mydocument.pdf"，那么content-disposition响应头的值就是"attachment; filename=mydocument.pdf"。当浏览器收到这样的响应头时，它会提示用户下载名为mydocument.pdf的文件。
总的来说，这两行代码的目的是设置响应头，以便浏览器知道响应的内容应该被视为一个文件，并且这个文件应该被下载，而不是在浏览器中显示。同时，它们还确保javascript代码可以访问content-disposition响应头的信息。
前端代码
download(form) {
const loading = this.$loading({
lock: true,
text: 'loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
downloadfile({ id: form.reportid }).then(response => {
var filename = ''
debugger;
const contentdisposition = response.headers['content-disposition']
if (contentdisposition) {
filename = window.decodeuri(response.headers['content-disposition'].split('=')[1], 'utf-8')
}
const blob = new blob([response.data], {
type: `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` // word文档为msword,pdf文档为pdf
})
const objecturl = url.createobjecturl(blob)
const link = document.createelement('a')
link.href = objecturl
link.setattribute('download', filename)
document.body.appendchild(link)
link.click()
// 释放内存
window.url.revokeobjecturl(link.href)
loading.close()
}).catch(response => {
loading.close()
})
}记录：获取axios响应头content-disposition中的文件名
今日需求是下载文件时，获取axios响应头content-disposition里的filename。
获取响应头里的信息，第一时间想到了响应拦截器。
直接在响应拦截器加入代码：
if (res.headers['content-disposition']) {
res.data.contentdisposition = res.headers['content-disposition']
}
axios请求中有content-disposition属性会直接添加在接口返回的数据里
后端返回filename为utf-8编码数据，只需使用decodeuricomponent()方法解码即可。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论