How to read image headers with React-CodePudding

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.

CodePudding user response：

prediction is not a CORS-safelisted response header so it is not available to client side code unless the API explicitly grants permission with the Access-Control-Expose-Headers response header.

Change the API to include:

Access-Control-Expose-Headers: prediction

in its response (in the same bit of code that adds access-control-allow-credentials).