跨域情况下前端获取response header的问题

js无法获取响应header的Content-Disposition字段

注： 前端使用 proxy 代理解决跨域时，本地测试是不会出问题的。打包上线后获取不到文件名

1、问题原因

 * 前端发送请求下载文件，在Response Headers里通过js获取响应头里的Content-Disposition字段的值，从中分离出文件名

 * 但是通过查看NetWork控制台确实是能看到content-disposition,但是在响应拦截器里用js headers["content-disposition"]来获取，但是打印 header对象里并没有content-disposition，无法获取，这是什么原因？

 2、原理 Access-Control-Expose-Headers

MDN文档查看：Access-Control-Expose-Headers

响应首部 Access-Control-Expose-Headers 列出了哪些首部可以作为响应的一部分暴露给外部。

默认情况下，只有七种 simple response headers（简单响应首部）可以暴露给外部：

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

如果想要让客户端可以访问到其他的首部信息，可以将它们在 Access-Control-Expose-Headers 里面列出来。

3、后端解决办法

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

成功解决

4、前端代码

    handleBatchDownload() {
      let selectRows = this.gridOptions.api.getSelectedRows();
      let idArr = selectRows.map(e => e.callId);
      batchDownload(idArr).then(res => {
        const fileName = res.headers["content-disposition"].split("=")[1];
        const blob = new Blob([res.data], {
          type: "application/octet-stream;charset=utf-8"
        });
        const url = window.URL.createObjectURL(blob);
        var link = document.createElement("a");
        link.href = url;
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(url);
      });
    },

参考：

 https://blog.csdn.net/w345731923/article/details/114067074