使用 Axios 获取请求的“Content-Disposition”标头答案

【问题标题】：Get "Content-Disposition" Header of a request with Axios使用 Axios 获取请求的“Content-Disposition”标头
【发布时间】：2018-07-05 22:20:27
【问题描述】：

我正在尝试从 axios 的 api 调用中获取请求的“Content-Disposition”标头，如下所示：

axios.get('Group/GetGroupObjectives', {
    params: { periodId, isPreliminary },
    responseType: 'arraybuffer',
  })
      .then((response) => {
        if (response) {
          response.request.getResponseHeader('Content-Disposition');
        } else {
          dispatch(docDownloadFailed());
        }
      })

当我获得标头时会抛出此错误“拒绝获得不安全的标头“Content-Disposition””

这个问题是由 api 中的 Cors 引起的，但是我在响应标头中获得了正确获取标头所需的所有标头：

Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:*
Access-Control-Request-Headers:*
Cache-Control:no-cache
Content-Disposition:attachment; filename="sample.xlsx"
Content-Length:7965
Content-Type:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
Date:Fri, 26 Jan 2018 14:35:38 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/10.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?RDpcVGVhbV9Tb2Zhc2FcRXh0cmFuZXRcRXh

如何通过 axios 调用正确获取响应标头？

【问题讨论】：

Access-Control-Expose-Headers响应头的值不能是*通配符。相反，它必须明确包含 Content-Disposition 以及您想从前端 JavaScript 代码访问的任何其他响应标头的名称。

标签： header cors axios

【解决方案1】：

如果您使用 .NET 的 WEB API，您可以在 web.config 中设置这些标头

   <customHeaders>
             <add name="Access-Control-Expose-Headers" value="Content-Disposition,X-Suggested-Filename"/>
      </customHeaders>

格子

【讨论】：

如果您将 VueJs 与 AXIOS 结合使用，请查看这篇文章，其中有很多有用的信息，当然如果您想要来自 AXIS 调用的 blob，请使用 {responseType: 'blob'})。 stackoverflow.com/questions/41938718/…
@SimonRestrepo 您能否分享您的解决方案作为答案之一？其他人可能需要它。谢谢！