使用Axios获取请求的“Content-Disposition”头信息

Question

我正在尝试通过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 调用中正确获取响应头？

- Simon Restrepo

---

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

Answer 1

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

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

问候

- Ben Croughs

---

如果您正在使用VueJs与AXIOS相结合，请查看此文章，其中有很多有用的信息，尤其是如果您想从AXIS调用中使用一个blob，则可以使用 {responseType：'blob'})。 https://dev59.com/BlgQ5IYBdhLWcg3w-o1w - Ben Croughs

@SimonRestrepo，你能把你的解决方案分享为其中一个答案吗？其他人可能需要它。谢谢！ - jedi