带有 CLI + Boot Strap4 的 Angular2 无法在 'XMLHttpRequest' 上执行 'setRequestHeader'：'Authorization: Bearer '

Question

环境 – Angular2 带 CLI + Boot Strap4 是前端 (localhost:4200) Spring boot + Security +JWT + 后端的 REST Ful 控制器 (localhost:8080)

Chrome 给出 Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'Authorization: Bearer ' is not a valid HTTP header field name 同一段代码在 IE 下运行良好。

从过去两周开始，我一直在崩溃，并且进行了大量谷歌搜索，但无法解决问题。由于我运行没时间所以在这里post提这个问题希望Angular2大神们提供解决这个问题的建议

环境 – Angular2 带 CLI + Boot Strap4 是前端 (localhost:4200) Spring boot + Security +JWT + 后端的 REST Ful 控制器 (localhost:8080)

场景如下：

登录屏幕

Onsubmit - 将凭据传递给 Spring 引导安全性以进行身份验证。

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);
     }
    )

 });

成功验证后Spring安全生成 JWT 令牌并将令牌发送回堡垒端，将其保存在响应中header，如下所示

response.addHeader("Authorization", "Bearer " + JWT);

问题 1- 某些原因 Angular 2 (localhost:4200) 响应 header 缺少授权 header 详细信息，该详细信息位于 Spring 引导安全服务 (localhost:8080)

对于问题 1 - 我通过在响应中发送 JWT 令牌来解决问题 body。

从响应 body 中提取令牌后，我通过在 Angular 2 请求 Header 中传递令牌来调用不同的 restful 服务，如下所示：

发送令牌（令牌）{

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});

}

上面的工作在 IE 中工作正常但是在 Chrome 中测试相同的东西时得到无法在 'XMLHttpRequest' 上执行 'setRequestHeader'：'Authorization: Bearer ' 不是有效的 HTTP header 字段名称。另外请验证屏幕截图以获取更详细的控制台日志。

我也用 RequestOptions withCredentials = true 尝试了上面的代码，但 Chrome 没有运气。

请 post 您提出解决问题的建议。 enter image description here

Answer 1

我能够解决这个问题。这个问题是由于 CORS。 Chrome 正在进行预检，服务器未设置 headers，因此在实际调用期间 chrome 无法识别授权 header。

带有 CLI + Boot Strap4 的 Angular2 无法在 'XMLHttpRequest' 上执行 'setRequestHeader'：'Authorization: Bearer '

Angular2 with CLI + Boot Strap4 Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'Authorization: Bearer '

jwt

angular-cli

angular