問題場景

在前後端分離專案中 , 後端新增請求頭資訊，頭存放檔案下載名稱以及日期等資訊，在前端執行下載事件時，發現封裝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");

重啟專案，再次點選下載事件，下載成功。