How to get the headers of a reponse in a fetch request? - reactjs

Question

I'm trying to get the headers of a response following a fetch request and to assign some values to my redux state. I can only get access to the promise of the headers though. I would appreciate some help on figuring out why.
export function sign_in(email, password){
return (dispatch) => {
dispatch({ type: 'LOGGING_USER_IN' });
return fetch("http://localhost:3000/api/v1/auth/sign_in" ,{
method: "POST",
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json; charset=utf-8"
},
body: JSON.stringify({
email: email,
password: password
})
})
.then(response => {
dispatch({type:'LOGGING_USER_IN_SUCCESS', payload: response.headers})
})
.catch(error =>{
dispatch({type:'LOGGING_USER_IN_FAILURE', payload: error, error:true})
})
}
};
My reducer:
export default function authReducer(state = {
isLoaded: false,
}, action) {
switch (action.type) {
case 'LOGGING_USER_IN':
return {
...state,
}
case 'LOGGING_USER_IN_SUCCESS':
// console.log(action.payload.get("access-token"))
return {
// ...state,
isLoaded: true,
user: action.payload}
case 'LOGGING_USER_IN_FAILURE':
return{
...state,
isLoaded: true,
errorMessage: action.payload.message}
default:
return state;
}
}

Answer 1

response.headers is a Headers{} object that represents the HTTP response headers.
You need to lookup the headers that you want to dispatch by calling get(name), or you can get all the headers by using forEach like this:
.then(response => {
const payload = {};
response.headers.forEach((value, name) => payload[name] = value);
dispatch({type:'LOGGING_USER_IN_SUCCESS', payload })
})
demo
A side note:
Only the following headers are exposed:
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
So if you want to access any other headers, you will need to set the Access-Control-Expose-Headers header appropriately.
source