Question

环境 - 带CLI的Angular2 + Boot Strap4是前端（localhost：4200） Spring Boot + Security +后端的JWT + REST Ful控制器（localhost：8080）

Chrome无法在'XMLHttpRequest'上执行'setRequestHeader'：'授权：承载'不是有效的HTTP标头字段名称，同一段代码可以正常使用IE。

我过去两周一直在打破脑袋，并且进行了大量的谷歌搜索，无法解决问题。由于我的时间不多了，我在这里发布这个问题，希望一些Angular2众神会提供解决这个问题的建议。

环境 - 带CLI的Angular2 + Boot Strap4是前端（localhost：4200） Spring Boot + Security +后端的JWT + REST Ful控制器（localhost：8080）

以下是该方案：

登录屏幕

Onsubmit - 将凭证传递给Spring Boot Security进行身份验证。

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 Security生成JWT令牌并将令牌发送回堡垒，并将其保留在响应头中，如下所示

response.addHeader（“授权”，“持票人”+ JWT）;

问题1- Angular 2（localhost：4200）响应标头缺少授权标头详细信息的原因，该详细信息位于Spring Boot安全服务（localhost：8080）中

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

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

sendToken（令牌）{

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头字段名称。另外，请验证屏幕截图以获取更详细的控制台日志。

我曾尝试使用RequestOptions withCredentials = true的上述代码，但Chrome没有运气。

请发布您的建议以解决问题。 enter image description here

Answer 1

我可以解决此问题。此问题归因于CORS。 Chrome正在进行预检，而服务器未设置标头，因此实际调用期间Chrome无法识别授权标头。

带有CLI + Boot Strap4的Angular2无法在'XMLHttpRequest'上执行'setRequestHeader'：'授权：承载'

1 个答案: