I have an API I can query to get an image, which has some headers I would like to read. In the documentation of the API (built with fastAPI), I read that the response body is the image and that the response headers are something like this

 Response headers
 access-control-allow-credentials: true 
 content-type: image/png 
 date: Sun,05 Dec 2021 12:08:58 GMT 
 prediction: COVID - 19 
 server: uvicorn 
 transfer-encoding: chunked 

I would like to acces the prediction header.

Now, when I do the request via axios and React, I ask the response to be of type arraybuffer or blob, so that I can plot it to a webpage. I convert it and then plot it in some way.

   axios.post(Endpoint + 'predict', formData,
            {
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                params: {
                    xmin,
                    ymin,
                    xmax,
                    ymax,
                },
                responseType: 'arraybuffer'
            }).then(response => {
            console.log(response)
            let base64ImageString = Buffer.from(response.data, 'binary').toString('base64')
            let srcValue = "data:image/png;base64,"+base64ImageString
            setImage(srcValue)
            console.log(response.headers)
        })

Given that the request is for arraybuffer or blob, how should I access the prediction header?

If I try to log the response.headers I get this:

{
    "content-type": "image/png"
}

but I can't access the prediction header.

If some further information are required, I can provide it. Thanks in advance.

EDIT just add the expose_headers parameter to the CORS configuration of the fastAPI code. see docs here