Can't access Content-Disposition in axios

Question

I have a React JS application where I send a GET request with axios. In the browser, in the Response Headers section, when I send the request I get Content-Disposition: attachment;filename="image123.pdf", but when I try to get this in React, I don't get any field with this name. So when I try to access the response.headers['content-disposition'], I don't get anything.

Is it possible to read this header key using React JS using axios?

Fleecy

Does this answer your question? Axios get access to response header fields – Siderostat

I'm getting the same issue, did you find any solution? I can see the content-disposition in the API response from network tab but when I make Axios request i'm not getting it in my response header, – Sunup

Answer 1

You must ensure that appropriate access has been granted from the server side for this matter through CORS. You can perform a quick comparison with the following piece of code to make sure that there is no issue for server-side access to this specific matter. check it in server:

res.header('Access-Control-Expose-Headers', 'Content-Disposition');

The next step for you is to make sure that you are sending these two items from the client side to the server.

set in header (client-side):

responseType: 'blob',
withCredentials: true,

Socage

Answer 2

As mentioned in Axios get access to response header fields, you need to expose the header from your server in order to be able to access it via axios in React.

In .net core within your CORS setup, you need to add the following line:

.WithExposedHeaders("Content-Disposition");

Then you will be able to get it from your react app.

Chroma