在前后端分离项目中，前端项目获取不到后端项目添加的请求头信息

本文链接：https://blog.csdn.net/qq_38628046/article/details/109159401

在一篇关于前后端分离项目的博客中，作者描述了一个问题，即前端在尝试下载文件时，由于无法正确获取到后端设置的请求头Content-Disposition，导致下载失败。后端使用`response.setHeader(Content-Dispositionattachment;filename=+fileName+.xlsx);`来设置文件名，而前端在Download.js中尝试通过`res.headers['content-disposition']`获取该信息。问题的解决方案是后端添加`response.addHeader(Content-Dispositionattachment;filename=+fileName+.xlsx);`和`response.setHeader(Access-Control-Expose-HeadersContent-Disposition);`，允许跨域访问请求头。修复后，前端能成功下载文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题场景

在前后端分离项目中 , 后端添加请求头信息，头存放文件下载名称以及日期等信息，在前端执行下载事件时，发现封装Download.js报错，原因在于头content-disposition获取失败。

发现问题

后端设置请求头信息：

response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");

在这里插入图片描述

前端下载事件

                <a-button icon="export" :loading="exporting" @click="() => {
                    this.exporting = true;
                    Download(this.axios.get(this.$Api.*.*.exportCostFinance, {
                        responseType: 'arraybuffer',
                        params: {
                            company: this.form.company === 0 ? 0 : this.form.company || -1,
                            department: this.form.department || 0,
                            branchOffice: this.form.branchOffice || 0,
                            startMonth: this.form.startMonth && this.form.startMonth.format('YYYY/MM/01') || '',
                            endMonth: this.form.endMonth && this.form.endMonth.endOf('month').format('YYYY/MM/DD') || '',
                        }
                    })).finally(() => this.exporting = false);
                }">导出</a-button>

封装Download.js

function Download(request) {
    return new Promise((resolve, reject) => {
        request.then(res => {
            console.log(res)
            let filename = res.headers['content-disposition'].replace('attachment;filename=', '');
            let conentType = res.headers['content-type'];
            const blob = new Blob([res.data], {type: conentType});
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
                // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
                window.navigator.msSaveBlob(blob, decodeURI(filename))
            } else {
                // 创建新的URL并指向File对象或者Blob对象的地址
                const blobURL = window.URL.createObjectURL(blob)
                // 创建a标签，用于跳转至下载链接
                const tempLink = document.createElement('a')
                tempLink.style.display = 'none'
                tempLink.href = blobURL
                tempLink.setAttribute('download', decodeURI(filename))
                // 兼容：某些浏览器不支持HTML5的download属性
                if (typeof tempLink.download === 'undefined') {
                    tempLink.setAttribute('target', '_blank')
                }
                // 挂载a标签
                document.body.appendChild(tempLink)
                tempLink.click()
                document.body.removeChild(tempLink)
                // 释放blob URL地址
                window.URL.revokeObjectURL(blobURL)
            }
            resolve(res);
        }).catch(res => {
            reject(res);
        });
    });
}

export {
    Download
}

点击下载事件，content-disposition头信息实际上没有，Download.js报错，下载失败。

在这里插入图片描述

解决问题

 response.addHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
 
 response.setHeader("Access-Control-Expose-Headers","Content-Disposition");

在这里插入图片描述

重启项目，再次点击下载事件，下载成功。

在这里插入图片描述