This took me all day, and here is the answer:
AngularJS + Interceptor - Cannot access Authorization header but is there in chrome dev tools!
I am totally lost with this issue. I have being struggling with it since 5 hours ago. I dont know what is going on.
I have an angularJS app. The app uses JWT tokens in order to authenticate.
The token gets refreshed in every single request it makes to the backend.
The token gets attached in the header of the response or request.
So when a request goes out to the backend, the response has the new token in the header.
The issue ,.....
I cann perfectly see the new token from Chrome Developer tools under the network tab. But in my angularJS ... the authorization header is not there.
I leave here the codes I am using and also some screenshots from my browser.
Any help is welcome.
Screenshots:
here we can see the actual request sent to the server. Under the "request headers" I succesfully attach the TOKEN saved in my localStorage.
And under the "Response headers" we can successfully see the new token sent by the Backend ... BUT! I cannot update the token in my local storage with the new one, because it looks like angularJS does not "see" the authorization header or somethin like that.

The NEW TOKEN is never saved in my local storage, I cannot even see the Authorization header when I console.log it.
My interceptor:
app.config( function ($httpProvider) {
$httpProvider.interceptors.push(["$q", "$location", function ($q, $location) {
return {
"request": function (config) {
config.headers = config.headers || {};
var token = window.localStorage.getItem("_token");
if (token) {
config.headers.Authorization = "Bearer " + token;
}
return config;
},
"response" : function (response) {
console.log("Response", response);
let token = null;
if (response && response.data && response.data.access_token) {
token = response.data.access_token;
} else if (response.headers("Authorization")) {
/* THIS NEVER GETS EXECUTED */
token = response.headers("Authorization");
if (token) {
token = token.split(" ")[1];
}
} else {
console.log("ERROR FATAL");
token = null;
}
if (token) {
window.localStorage.setItem("_token", token);
response.config.headers.Authorization = "Bearer " + token;
}
return response;
},
"reponseError": function (response) {
if (response.status == 401 || response.status == 403) {
window.localStorage.removeItem("_token");
//$location.path("/login");
}
$q.reject(response);
}
};
}]);
});
Please or to participate in this conversation.