jdallain
asked on
Retrieve response header - authorization bearer token
Hello Experts,
I'm trying to retrieve the authorization bearer token from the response header. In Chrome, I can see it in on the Network tab (see image), but I can't find it on the Console tab.
Thanks, James
bearer.PNG
I'm trying to retrieve the authorization bearer token from the response header. In Chrome, I can see it in on the Network tab (see image), but I can't find it on the Console tab.
axios.post(`${ROOT_URL}/nosh/jwt/signin`,{ username, password }, config)
.then(response => {
response.headers
response.headers['autherization']
response.headers['autherization:bearer']
response.headers.valueOf('authorization')
})
.catch(() => {
});
}
}
I tried to console.log all the above. I can't figure out how to see/grab the token. Thanks, James
bearer.PNG
If that code sample is correct, then you're simply spelling 'Authorization' incorrectly as 'autherization'. Note also that the names of the headers are capitalized in specific ways that you should copy.
ASKER
Thanks for responding, Dave. I still get undefined.
James
James
console.log(response.headers['Authorization']);
ASKER
Here's all the code. I'm getting the JWT on the Post.
import axios from 'axios';
import { browserHistory } from 'react-router';
import {
AUTH_USER,
UNAUTH_USER,
AUTH_ERROR,
FETCH_MESSAGE
} from './types';
const ROOT_URL = 'http://localhost:8088';
const base64 = require('base-64');
export function signinUser({ username, password }) {
return function(dispatch) {
// Submit email/password to the server
var config = {
headers: {'Authorization' : 'Basic ' + base64.encode(username + ':' + password),
}
}
axios.post(`${ROOT_URL}/nosh/jwt/signin`,{ username, password }, config)
.then(response => {
dispatch({type:AUTH_USER});
console.log(response.headers['Authorization']);
})
.catch(() => {
dispatch(authError('Bad Login Info'));
});
}
}
export function authError(error){
return{
type: AUTH_ERROR,
payload: error
}
}
I'm not sure what you're doing. Do you see any of the response headers in the 'console'? In other words, does the method work at all? Try it on a simple page that does not require a login.
ASKER
ASKER
ASKER
Yeah, it's working. I can see it on the Network tab, but I can't grab it in code.
I don't know what to tell you except click on "Request Attention" in the little box with 3 dots to get someone else to look at this.
ASKER
Ok, thanks for the effort.
James
James
what do you get in Chrome console using this :
axios.post(`${ROOT_URL}/nosh/jwt/signin`,{ username, password }, config)
.then(function(response) {
console.log(JSON.stringify(response));
})
ASKER
{"data":"","status":204,"s tatusText" :"No Content","headers":{},"con fig":{"tra nsformRequ est":{},"t ransformRe sponse":{} ,"headers" :{"Accept" :"applicat ion/json, text/plain, */*","Content-Type":"appli cation/jso n;charset= utf-8","Au thorizatio n":"Basic amFtZXMuYWxsYWluQGdtYWlsLm NvbTpj"}," timeout":0 ,"xsrfCook ieName":"X SRF-TOKEN" ,"xsrfHead erName":"X -XSRF-TOKE N","maxCon tentLength ":-1,"meth od":"post" ,"url":"http://localhost:8088/nosh/jwt/signin", "data":"{\ "username\ ":\"james. allain@gma il.com\",\ "password\ ":\"c\"}"} ,"request" :{}}
ok, so axios remove the header content, not sure why in your case.
I'm able to read my header with axios on my side.
so, just do a basic Ajax call to see if you get it, replace your code (what you post in your original question) by :
and please post what you get in console, I hope you will see the headers you're looking for...
I'm able to read my header with axios on my side.
so, just do a basic Ajax call to see if you get it, replace your code (what you post in your original question) by :
var req = new XMLHttpRequest();
req.open("POST", `${ROOT_URL}/nosh/jwt/signin`, true);
req.onreadystatechange = function() {
if(req.readyState == 4)
console.log(req.getAllResponseHeaders());
console.log(JSON.stringify(req.getAllResponseHeaders()));
};
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send(encodeURIComponent(username) + "=" + encodeURIComponent(password));
and please post what you get in console, I hope you will see the headers you're looking for...
ASKER
Thanks. I'm getting a 401. I need to send...
I tried...
var config = {
headers: {'Authorization' : 'Basic ' + base64.encode(username + ':' + password),
}
...in the request header. I tried...
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded",config);
...but I still got a 401.
var req = new XMLHttpRequest();
req.open("POST", `${ROOT_URL}/nosh/jwt/signin`, true);
req.onreadystatechange = function() {
if(req.readyState == 4)
console.log(req.getAllResponseHeaders());
console.log(JSON.stringify(req.getAllResponseHeaders()));
};
req.setRequestHeader("Authorization", "Basic " + Base64.encode(username + ":" + password));
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send(encodeURIComponent(username) + "=" + encodeURIComponent(password));
ASKER
Got a 400.
ASKER
The server is expecting a payload with username and password.
Do you've a link to test it in live?
Let's try this :
Let's try this :
var req = new XMLHttpRequest();
req.open("POST", `${ROOT_URL}/nosh/jwt/signin`, true);
req.onreadystatechange = function() {
if(req.readyState == 4)
console.log(req.getAllResponseHeaders());
console.log(JSON.stringify(req.getAllResponseHeaders()));
};
req.setRequestHeader("Authorization", "Basic " + Base64.encode(username + ":" + password));
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
req.send(JSON.stringify({username:username, password:password}));
ASKER
Test it live? I've never done that before
ASKER
It doesn't seem to be doing anything with the added payload. It's like it locked up.
Test it live? I've never done that before
I mean can I access to your site?
ASKER
Definitely. Yes.
nice, could you give me the address and a temporary account too?
ASKER
I'm sorry. I'm still local. I thought you meant remote in.
ok, let go back to your axios version, use this one : https://unpkg.com/axios@0.15.3/dist/axios.js
just update the source file adding the console after line 716 just like this :
and let me know what you get in the console
just update the source file adding the console after line 716 just like this :
var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null; // line 716
console.log((typeof responseHeaders == "object")?JSON.stringify(responseHeaders):responseHeaders);
and let me know what you get in the console
ASKER
I got a response. It's an empty "".
ASKER
The non-axious version gave me a response of "".
ok, let me know what the hacked axios show you please
ASKER
Can I add that to my bundle.js? I can't find a axios.js file in node_modules that looks like that one. They're all really small files.
ASKER
I found it
ASKER
I got...
{"data":"","status":204,"s tatusText" :"No Content","headers":{},"con fig":{"tra nsformRequ est":{},"t ransformRe sponse":{} ,"headers" :{"Accept" :"applicat ion/json, text/plain, */*","Content-Type":"appli cation/jso n;charset= utf-8","Au thorizatio n":"Basic amFtZXMuYWxsYWluQGdtYWlsLm NvbTpj"}," timeout":0 ,"xsrfCook ieName":"X SRF-TOKEN" ,"xsrfHead erName":"X -XSRF-TOKE N","maxCon tentLength ":-1,"meth od":"post" ,"url":"http://localhost:8088/nosh/jwt/signin", "data":"{\ "username\ ":\"james. allain@gma il.com\",\ "password\ ":\"c\"}"} ,"request" :{}}
{"data":"","status":204,"s
ASKER
I'm getting a parseHeaders not defined in the axios.js
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Cool. I'll work on that tomorrow. Thanks a lot for all your help. You really know your stuff. I'll let you know what I figure out
ASKER
It wasn't being exposed on the server. Thanks a bunch for your help. I learned a lot. Wish I could give you more points :)
James
James