How to pass JsonWebToken(JWT) through AngularJS
up vote
2
down vote
favorite
1
I created a Django RESTful API with JWT as authentication method, but unable to pass the token as headers using angularJS.
I think there is no error on my API, since I used the token I acquired by this script and tested it in Postman:
my JWT token authentication script is here:
// Uses http.get() to load data from a single API endpoint
list() {
return this.http.get('api/', this.getHttpOptions());
}
// helper function to build the HTTP headers
getHttpOptions() {
return {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token
})
};
}
I tried using http.get() here. Thanks in advance!
the error will be like:
401 (Unauthorized)
angularjs django-rest-framework jwt
asked Nov 20 at 23:32
hsbzzhz
317
add a comment |
up vote
2
down vote
favorite
1
I created a Django RESTful API with JWT as authentication method, but unable to pass the token as headers using angularJS.
I think there is no error on my API, since I used the token I acquired by this script and tested it in Postman:
my JWT token authentication script is here:
// Uses http.get() to load data from a single API endpoint
list() {
return this.http.get('api/', this.getHttpOptions());
}
// helper function to build the HTTP headers
getHttpOptions() {
return {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token
})
};
}
I tried using http.get() here. Thanks in advance!
the error will be like:
401 (Unauthorized)
angularjs django-rest-framework jwt
asked Nov 20 at 23:32
hsbzzhz
317
are you seeing the header in the network request to api/ ?
– karthick
Nov 20 at 23:42
I am having the same issue using Django rest framework Token and Ionic3. The headers appear to be set in the request, Access-Control-Request-Headers authorization,content-type. When i manually resend the request in firefox with the header as, Authorization: Token xxxmyaccesstokenxxx it succeeds which leads me to believe that Ionic/Angular is not setting the token in a way Django can access it.
– J.ward
9 hours ago
add a comment |
up vote
2
down vote
favorite
1
up vote
2
down vote
favorite
1
1
I created a Django RESTful API with JWT as authentication method, but unable to pass the token as headers using angularJS.
I think there is no error on my API, since I used the token I acquired by this script and tested it in Postman:
my JWT token authentication script is here:
// Uses http.get() to load data from a single API endpoint
list() {
return this.http.get('api/', this.getHttpOptions());
}
// helper function to build the HTTP headers
getHttpOptions() {
return {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token
})
};
}
I tried using http.get() here. Thanks in advance!
the error will be like:
401 (Unauthorized)
angularjs django-rest-framework jwt
asked Nov 20 at 23:32
hsbzzhz
317
I created a Django RESTful API with JWT as authentication method, but unable to pass the token as headers using angularJS.
I think there is no error on my API, since I used the token I acquired by this script and tested it in Postman:
my JWT token authentication script is here:
// Uses http.get() to load data from a single API endpoint
list() {
return this.http.get('api/', this.getHttpOptions());
}
// helper function to build the HTTP headers
getHttpOptions() {
return {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token
})
};
}
I tried using http.get() here. Thanks in advance!
the error will be like:
401 (Unauthorized)
angularjs django-rest-framework jwt
angularjs django-rest-framework jwt
asked Nov 20 at 23:32
hsbzzhz
317
asked Nov 20 at 23:32
hsbzzhz
317
edited 2 days ago
asked Nov 20 at 23:32
hsbzzhz
317
asked Nov 20 at 23:32
hsbzzhz
317
asked Nov 20 at 23:32
hsbzzhz
317
317
are you seeing the header in the network request to api/ ?
– karthick
Nov 20 at 23:42
I am having the same issue using Django rest framework Token and Ionic3. The headers appear to be set in the request, Access-Control-Request-Headers authorization,content-type. When i manually resend the request in firefox with the header as, Authorization: Token xxxmyaccesstokenxxx it succeeds which leads me to believe that Ionic/Angular is not setting the token in a way Django can access it.
– J.ward
9 hours ago
add a comment |
are you seeing the header in the network request to api/ ?
– karthick
Nov 20 at 23:42
I am having the same issue using Django rest framework Token and Ionic3. The headers appear to be set in the request, Access-Control-Request-Headers authorization,content-type. When i manually resend the request in firefox with the header as, Authorization: Token xxxmyaccesstokenxxx it succeeds which leads me to believe that Ionic/Angular is not setting the token in a way Django can access it.
– J.ward
9 hours ago
are you seeing the header in the network request to api/ ?
– karthick
Nov 20 at 23:42
are you seeing the header in the network request to api/ ?
– karthick
Nov 20 at 23:42
I am having the same issue using Django rest framework Token and Ionic3. The headers appear to be set in the request, Access-Control-Request-Headers authorization,content-type. When i manually resend the request in firefox with the header as, Authorization: Token xxxmyaccesstokenxxx it succeeds which leads me to believe that Ionic/Angular is not setting the token in a way Django can access it.
– J.ward
9 hours ago
I am having the same issue using Django rest framework Token and Ionic3. The headers appear to be set in the request, Access-Control-Request-Headers authorization,content-type. When i manually resend the request in firefox with the header as, Authorization: Token xxxmyaccesstokenxxx it succeeds which leads me to believe that Ionic/Angular is not setting the token in a way Django can access it.
– J.ward
9 hours ago
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
Try this:
list() {
return this.http.get('api/', { this.getHttpOptions() });
}
getHttpOptions() {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token
});
return headers;
}
answered Nov 21 at 0:23
brando
5,43352851
Thank you, I tried in this way: return this.http.get(api/', {headers : this.getHttpOptions() });, but still doesn't work, same error code 401. I doubt the page hasn't refresh after I log in successful
– hsbzzhz
Nov 21 at 3:58
Sorry that didn't work. That's almost exactly the code I use and it work fine for me. Strange
– brando
Nov 21 at 4:54
add a comment |
up vote
0
down vote
Same issue on JWT for CakePHP3, and follow header slove it, may it is helpful.
this.http.get('api/', { headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token,
'Authenticationtoken': 'JWT ' + this._userService.token
}) });
answered Nov 21 at 4:40
incNick
1794
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
Try this:
list() {
return this.http.get('api/', { this.getHttpOptions() });
}
getHttpOptions() {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token
});
return headers;
}
answered Nov 21 at 0:23
brando
5,43352851
Thank you, I tried in this way: return this.http.get(api/', {headers : this.getHttpOptions() });, but still doesn't work, same error code 401. I doubt the page hasn't refresh after I log in successful
– hsbzzhz
Nov 21 at 3:58
Sorry that didn't work. That's almost exactly the code I use and it work fine for me. Strange
– brando
Nov 21 at 4:54
add a comment |
up vote
1
down vote
Try this:
list() {
return this.http.get('api/', { this.getHttpOptions() });
}
getHttpOptions() {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token
});
return headers;
}
answered Nov 21 at 0:23
brando
5,43352851
Thank you, I tried in this way: return this.http.get(api/', {headers : this.getHttpOptions() });, but still doesn't work, same error code 401. I doubt the page hasn't refresh after I log in successful
– hsbzzhz
Nov 21 at 3:58
Sorry that didn't work. That's almost exactly the code I use and it work fine for me. Strange
– brando
Nov 21 at 4:54
add a comment |
up vote
1
down vote
up vote
1
down vote
Try this:
list() {
return this.http.get('api/', { this.getHttpOptions() });
}
getHttpOptions() {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token
});
return headers;
}
answered Nov 21 at 0:23
brando
5,43352851
Try this:
list() {
return this.http.get('api/', { this.getHttpOptions() });
}
getHttpOptions() {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token
});
return headers;
}
answered Nov 21 at 0:23
brando
5,43352851
edited Nov 21 at 0:44
answered Nov 21 at 0:23
brando
5,43352851
answered Nov 21 at 0:23
brando
5,43352851
answered Nov 21 at 0:23
brando
5,43352851
5,43352851
Thank you, I tried in this way: return this.http.get(api/', {headers : this.getHttpOptions() });, but still doesn't work, same error code 401. I doubt the page hasn't refresh after I log in successful
– hsbzzhz
Nov 21 at 3:58
Sorry that didn't work. That's almost exactly the code I use and it work fine for me. Strange
– brando
Nov 21 at 4:54
add a comment |
Thank you, I tried in this way: return this.http.get(api/', {headers : this.getHttpOptions() });, but still doesn't work, same error code 401. I doubt the page hasn't refresh after I log in successful
– hsbzzhz
Nov 21 at 3:58
Sorry that didn't work. That's almost exactly the code I use and it work fine for me. Strange
– brando
Nov 21 at 4:54
Thank you, I tried in this way: return this.http.get(api/', {headers : this.getHttpOptions() });, but still doesn't work, same error code 401. I doubt the page hasn't refresh after I log in successful
– hsbzzhz
Nov 21 at 3:58
Thank you, I tried in this way: return this.http.get(api/', {headers : this.getHttpOptions() });, but still doesn't work, same error code 401. I doubt the page hasn't refresh after I log in successful
– hsbzzhz
Nov 21 at 3:58
Sorry that didn't work. That's almost exactly the code I use and it work fine for me. Strange
– brando
Nov 21 at 4:54
Sorry that didn't work. That's almost exactly the code I use and it work fine for me. Strange
– brando
Nov 21 at 4:54
add a comment |
up vote
0
down vote
Same issue on JWT for CakePHP3, and follow header slove it, may it is helpful.
this.http.get('api/', { headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token,
'Authenticationtoken': 'JWT ' + this._userService.token
}) });
answered Nov 21 at 4:40
incNick
1794
add a comment |
up vote
0
down vote
Same issue on JWT for CakePHP3, and follow header slove it, may it is helpful.
this.http.get('api/', { headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token,
'Authenticationtoken': 'JWT ' + this._userService.token
}) });
answered Nov 21 at 4:40
incNick
1794
add a comment |
up vote
0
down vote
up vote
0
down vote
Same issue on JWT for CakePHP3, and follow header slove it, may it is helpful.
this.http.get('api/', { headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token,
'Authenticationtoken': 'JWT ' + this._userService.token
}) });
answered Nov 21 at 4:40
incNick
1794
Same issue on JWT for CakePHP3, and follow header slove it, may it is helpful.
this.http.get('api/', { headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'JWT ' + this._userService.token,
'Authenticationtoken': 'JWT ' + this._userService.token
}) });
answered Nov 21 at 4:40
incNick
1794
answered Nov 21 at 4:40
incNick
1794
answered Nov 21 at 4:40
incNick
1794
answered Nov 21 at 4:40
incNick
1794
1794
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403192%2fhow-to-pass-jsonwebtokenjwt-through-angularjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
are you seeing the header in the network request to api/ ?
– karthick
Nov 20 at 23:42
I am having the same issue using Django rest framework Token and Ionic3. The headers appear to be set in the request, Access-Control-Request-Headers authorization,content-type. When i manually resend the request in firefox with the header as, Authorization: Token xxxmyaccesstokenxxx it succeeds which leads me to believe that Ionic/Angular is not setting the token in a way Django can access it.
– J.ward
9 hours ago