使用axios獲取不到響應(yīng)頭Content-Disposition

項(xiàng)目中后端返回的文件流

前端需要拿到響應(yīng)頭里的Content-Disposition字段的值，從中獲取文件名

在控制臺(tái)Headers中可以看到相關(guān)的字段和文件名，但是在axios里面卻獲取不到

如果想要讓客戶端訪問(wèn)到相關(guān)信息，服務(wù)器不僅要在heade里添加，還要將它們?cè)?Access-Control-Expose-Headers 里面列出來(lái)

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

這兩行代碼是Java中用于設(shè)置HTTP響應(yīng)頭的，通常在Web開(kāi)發(fā)中，特別是當(dāng)涉及到文件下載時(shí)，會(huì)用到這樣的設(shè)置。

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");

這行代碼設(shè)置了Access-Control-Expose-Headers響應(yīng)頭。這個(gè)響應(yīng)頭與跨域資源共享（CORS）有關(guān)。默認(rèn)情況下，瀏覽器不允許跨域請(qǐng)求的JavaScript代碼訪問(wèn)某些響應(yīng)頭信息。但是，通過(guò)Access-Control-Expose-Headers，服務(wù)器可以告訴瀏覽器哪些額外的頭信息可以被JavaScript代碼訪問(wèn)。

在這里，服務(wù)器告訴瀏覽器，Content-Disposition這個(gè)響應(yīng)頭是可以被JavaScript代碼訪問(wèn)的。這通常在你需要在前端處理或檢查文件的下載信息時(shí)非常有用。

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

這行代碼設(shè)置了Content-Disposition響應(yīng)頭。Content-Disposition響應(yīng)頭指示瀏覽器如何處理響應(yīng)的內(nèi)容。當(dāng)它的值設(shè)置為attachment時(shí)，它告訴瀏覽器將響應(yīng)的內(nèi)容視為附件，而不是在頁(yè)面上顯示。這通常用于觸發(fā)文件的下載。

filename參數(shù)指定了下載文件的名稱。這里，它被設(shè)置為downloadName的值，這意味著你可以動(dòng)態(tài)地設(shè)置下載文件的名稱。

例如，如果downloadName的值是"mydocument.pdf"，那么Content-Disposition響應(yīng)頭的值就是"attachment; filename=mydocument.pdf"。當(dāng)瀏覽器收到這樣的響應(yīng)頭時(shí)，它會(huì)提示用戶下載名為mydocument.pdf的文件。

總的來(lái)說(shuō)，這兩行代碼的目的是設(shè)置響應(yīng)頭，以便瀏覽器知道響應(yīng)的內(nèi)容應(yīng)該被視為一個(gè)文件，并且這個(gè)文件應(yīng)該被下載，而不是在瀏覽器中顯示。同時(shí)，它們還確保JavaScript代碼可以訪問(wèn)Content-Disposition響應(yīng)頭的信息。

前端代碼

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()
        // 釋放內(nèi)存
        window.URL.revokeObjectURL(link.href)
        loading.close()
      }).catch(response => {
        loading.close()
      })
    }

記錄：獲取axios響應(yīng)頭content-disposition中的文件名

今日需求是下載文件時(shí)，獲取axios響應(yīng)頭content-disposition里的filename。

獲取響應(yīng)頭里的信息，第一時(shí)間想到了響應(yīng)攔截器。

直接在響應(yīng)攔截器加入代碼：

if (res.headers['content-disposition']) {
        res.data.contentDisposition =  res.headers['content-disposition']
    }

axios請(qǐng)求中有content-disposition屬性會(huì)直接添加在接口返回的數(shù)據(jù)里

后端返回filename為UTF-8編碼數(shù)據(jù)，只需使用decodeURIComponent()方法解碼即可。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論