解決辦法

• 需要后端的大佬配合，將Content-Disposition暴露出來
  response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
response.setHeader("Content-Disposition", ...)
• 響應(yīng)頭信息

{
"access-control-allow-credentials": "true",
"access-control-allow-headers": "Origin, X-Requested-With,Access-Control-Allow-Headers, Authorization, Content-Type, Accept, Connection, User-Agent, Cookie",
"access-control-allow-methods": "*",
"access-control-allow-origin": "http://localhost.com:8080",
"access-control-max-age": "3600",
"cache-control": "max-age=0",
"connection": "close",
"content-disposition": "attachment; filename=%E5%93%81%E7%89%8C%E7%AE%A1%E7%90%86.xlsx",
"content-type": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
"date": "Fri, 05 May 2023 11:16:25 GMT",
"expires": "Fri, 05 May 2023 11:16:25 GMT",
"server": "openresty",
"transfer-encoding": "chunked",
"x-powered-by": "Express"
}

• 在headers中有可能獲取到的是一個亂碼
  content-disposition: attachment; filename=%E5%93%81%E7%89%8C%E7%AE%A1%E7%90%86.xlsx
• 前端獲取headers[“content-disposition”]
  const filename = res?.headers?.["content-disposition"]?.split(";")?.[1]?.split("filename=")?.[1];
• 前端文件需要轉(zhuǎn)亂碼的方法
  const fileName = decodeURIComponent(temp); console.log("fileName:" + fileName) // 品牌管理.xlsx
• 導(dǎo)出文件

    let blob = new Blob([res?.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' }) // 處理文檔流
    const elink = document.createElement('a') // 創(chuàng)建a標(biāo)簽
    elink.download = fileName
    elink.style.display = 'none'
    elink.href = URL.createObjectURL(blob) // 創(chuàng)建blob地址
    document.body.appendChild(elink) // 將a標(biāo)簽添加到body中
    elink.click()
    URL.revokeObjectURL(elink.href) // 釋放URL對象
    document.body.removeChild(elink) // 從body中移除a標(biāo)簽

在開發(fā)環(huán)境http協(xié)議能拿到headers參數(shù)，但是發(fā)完線上https后拿不到想要的數(shù)據(jù)，可明明在控制臺Network里明明能看到，但是在響應(yīng)攔截器里用js headers["content-disposition"]來獲取，但是打印 header對象里并沒有content-disposition，無法獲取，這是什么原因？

• 原理（病灶）Access-Control-Expose-Headers
  根據(jù)MDN文檔：Access-Control-Expose-Headers

• 默認(rèn)情況下，header只有六種 simple response headers （簡單響應(yīng)首部）可以暴露給外部：

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

這里的暴露給外部，意思是讓客戶端可以訪問得到，既可以在Network里看到，也可以在代碼里獲取到他們的值。

上面問題提到的content-disposition不在其中，所以即使服務(wù)器在協(xié)議回包里加了該字段，但因沒“暴露”給外部，客戶端就“看得到，拿不到”。

而響應(yīng)首部 Access-Control-Expose-Headers 就是控制“暴露”的開關(guān)，它列出了哪些首部可以作為響應(yīng)的一部分暴露給外部。所以如果想要讓客戶端可以訪問到其他的首部信息，服務(wù)器不僅要在heade里加入該首部，還要將它們在 Access-Control-Expose-Headers 里面列出來。

解決辦法

需要后端同學(xué)設(shè)置響應(yīng)頭：

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
response.setHeader("Content-Disposition", ...)
設(shè)置成功后，瀏覽器Network可以看到：

{
"access-control-allow-credentials": "true",
"access-control-allow-headers": "Origin, X-Requested-With,Access-Control-Allow-Headers, Authorization, Content-Type, Accept, Connection, User-Agent, Cookie",
"access-control-allow-methods": "*",
"access-control-allow-origin": "http://localhost.com:8080",
"access-control-max-age": "3600",
"access-Control-Expose-Headers":"Content-Disposition",
"cache-control": "max-age=0",
"connection": "close",
"content-disposition": "attachment; filename=%E5%93%81%E7%89%8C%E7%AE%A1%E7%90%86.xlsx",
"content-type": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
"date": "Fri, 05 May 2023 11:16:25 GMT",
"expires": "Fri, 05 May 2023 11:16:25 GMT",
"server": "openresty",
"transfer-encoding": "chunked",
"x-powered-by": "Express"
}