reactjs - Unable to put HTTP headers in variable

Question

I am building a full-stack web application with a Spring Boot REST API and a React front-end, but am bothered by something. I would like to keep code duplication as low as possible, but I can't seem to put the HTTP headers for my axios requests in a variable and re-use it in all requests. The requests just simply fail using a variable.

This request works:

axios.get(baseUrl + "interests/user?id=" + localStorage.getItem('userId'), { headers: {
                withCredentials: true,
                authorization: 'Bearer ' + localStorage.getItem('token')
            }}
        )

This request doesn't work:

const headers = {
 headers: {
                withCredentials: true,
                authorization: 'Bearer ' + localStorage.getItem('token')
            }
}

axios.get(baseUrl + "interests/user?id=" + localStorage.getItem('userId'), { headers }
        )

Can anyone explain to me why this is not working, and possibly how to work around it? Thanks in advance

question from:https://stackoverflow.com/questions/65625735/unable-to-put-http-headers-in-variable

Answer 1

Waitting for answers