Angular2 with CLI + Boot Strap4 - Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'Authorization: Bearer ' is not a valid HTTP header field name
vdo...@gmail.com
Environments – Angular2 with CLI + Boot Strap4 is Front End ( localhost:4200)
Spring boot + Security +JWT + REST Ful Controllers for Back End (localhost:8080)
Chrome is giving the Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'Authorization: Bearer ' is not a valid HTTP header field name the same piece of code is working fine with IE.
I have been breaking my head from last two weeks and did lot of googling and unable to resolve the issue. As I am running out of time I am posting this question here hoping some Angular2 Gods will provide suggestions to resolve this issue.
Environments – Angular2 with CLI + Boot Strap4 is Front End ( localhost:4200)
Spring boot + Security +JWT + REST Ful Controllers for Back End (localhost:8080)
Here is the scenario:
Login Screen
Onsubmit - Passing the Credentials to the Spring Boot Security to Authenticate.
onSubmit() {
this.loginService.authenticateUser(this.loginUserDtls)
.subscribe(
data => {
let token= JSON.parse(JSON.stringify(data))._body;
console.log("TOKEN VALUE "+token) ;
this.loginService.sendToken(token).subscribe(
data => {
let dataRet= JSON.parse(JSON.stringify(data))._body;
console.log("data received "+dataRet);
}
)
});
On Successful authentication Spring Security generating the JWT Token and sending the token back to fort end keeping it in the response header as below
response.addHeader("Authorization", "Bearer " + JWT);
Issue 1-
Some reason Angular 2 (localhost:4200) response header is missing the Authorization header details which is placed in the Spring Boot Security Services (localhost:8080)
For Issue 1- I had a workaround by sending the JWT token in the response body.
After extracting the token the from response body, I am invoking a different restful service by passing token in the Angular 2 request Header as below :
sendToken(token) {
var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
headers.append('Authorization', 'Bearer '+ token);
headers.append('Accept', 'application/json');
return this.http.get('http://localhost:8082/users', {headers:headers});
}
The above worked is working fine in IE but when testing the same thing in Chrome getting the
Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'Authorization: Bearer ' is not a valid HTTP header field name. Also please verify the screenshot for more detailed console log.
I had tried the above code with RequestOptions withCredentials = true also but no luck with Chrome.
Please kindly post your suggestions to resolve the issue.
