Get "Content-Disposition" Header of a request with Axios

Question

I'm trying to get the 'Content-Disposition' Header of a request from api call by axios like this:

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

When i get the header throws this error "Refused to get unsafe header "Content-Disposition""

This problem is caused by Cors in the api, but i get all the headers needed for get the header correctly in the response header:

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

How do I get the response header correctly with axios call?

The value of `Access-Control-Expose-Headers` response header can’t be the `*` wildcard. Instead it has to explicitly include `Content-Disposition` and the names of any other response headers you want to access from your frontend JavaScript code. — sideshowbarker, Jan 27 '18 at 22:35

score 23 · Accepted Answer · answered Mar 23 '18 at 14:29

23

If you are using WEB API from .NET, you can set these headers in the web.config

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

Grtz

answered Mar 23 '18 at 14:29

Ben Croughs

2,566
1
20
30

Also check this article if you are using VueJs in combination with AXIOS, has a lot of useful info, certrainly if you want a blob from an AXIS call use {responseType: 'blob'}). https://stackoverflow.com/questions/41938718/how-to-download-files-using-axios – Ben Croughs Mar 26 '18 at 07:26
@SimonRestrepo can you share your solutions as one of the answer? other might need it. thanks! – jedi May 15 '19 at 01:45

Get "Content-Disposition" Header of a request with Axios

1 Answers1