I am currently utilizing a graphql api along with a vue.js frontend that incorporates the apollo client for fetching data from the backend. This setup has been operating smoothly thus far.
In each response header, the server sends back a new JWT-Token which is essential for my application. In order to handle this, I planned on implementing an afterware using the afterware, which would extract the new token from every response and update the corresponding storage entry. However, there seems to be an issue as the headers are showing up empty.
Below is the current implementation of the afterware:
apolloClient.networkInterface.useAfter([{
applyAfterware({ response }, next) {
if (process.env.NODE_ENV === 'development') {
console.log('got new response', response);
}
if (response.status === 401) {
store.commit('logout');
store.commit('routeLogin');
}
next();
}
}]);
This is how the response appears:
https://i.sstatic.net/uI9io.png
And this is what was actually sent:
https://i.sstatic.net/nCCRs.png
Am I overlooking something in my implementation?
UPDATE
I came across a similar issue in the project's issue tracker, which had a resolution involving adding Access-Control-Expose-Headers. In response, I added them to my server configuration. Despite these changes, the response still fails to populate apollo's headers object as expected: