fetch跨域下载文件

为何读取到的content-disposition header为null

在跨域访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，

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

如果要访问其他头，则需要服务器设置Access-Control-Expose-Headers

Access-Control-Expose-Headers:Content-Disposition

保存文件

fetch(`${url}`, {
      method: 'POST',
      headers: {
        ...
      },
      mode: 'cors',
      body: JSON.stringify({
        companyId: this.state.params.companyId,
        startDate: this.state.listParams.startDate,
        endDate: this.state.listParams.endDate,
      })
    }).then(res => res.blob().then(blob => {
      let a = document.createElement('a');
      let url = window.URL.createObjectURL(blob);   // 获取 blob 本地文件连接 (blob 为纯二进制对象，不能够直接保存到磁盘上)
      let disposition = res.headers.get('content-disposition');
      let filename =  (disposition && disposition.replace(/attachment;.*filename=/, '')) || 'uv.xls'
      console.log('disposition:', disposition)
      console.log('filename:', filename)
      a.href = url;
      a.download = filename;
      a.click();
      // 使用完ObjectURL后需要及时释放, 否则会浪费浏览器存储区资源.
      window.URL.revokeObjectURL(url);
    }))
  }

参考文章

• https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
• https://github.com/matthew-andrews/isomorphic-fetch/issues/67
• https://www.fullstackmemo.com/2018/03/31/fetch-save-file/
• http://www.ruanyifeng.com/blog/2016/04/cors.html