如何使用angular 2进行oAuth2基本身份验证？

我正在用angular 2做oauth2

这里是POST URL=”“

如何通过验证用户之一在前端传递clientId和client secret并获取访问令牌

如果angular2或任何配置中有任何插件可用，请建议我

我试着

private getHeaders(){
    // I included these headers because otherwise FireFox
    // will request text/html
    let headers = new Headers();
    let auth_data = 'username=my-trusted-client&password=secret';
    headers.append('Accept', 'application/json');
    headers.append('Authorization', auth_data);
    return headers;
  }

  testRequest() {
     let data = 'grant_type=password&username=bill&password=abc123';
     let postResponse = this.http
      .post(`${this.baseUrl}/oauth/token?`, data, {headers: 
         this.getHeaders()})
       .toPromise()
      .then(this.mapResult);
     return postResponse;

}

当我执行Post调用时

无法加载XMLHttpRequest . 对飞行前请求的响应未通过访问控制检查：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此，不允许使用源“” 通道响应的HTTP状态代码为401

这是我在控制台看到的错误

我有一个邮递员收集快照，可以快速准确地确定我需要什么，我从邮递员那里获得了oauth2，如下所示

这正是我需要从angular 2得到的

谢谢

如果angular2或任何配置中有任何插件可用，请 建议我

有很多不同平台的例子，因为你要求angular 2，你可以按照这个链接，这对我很有用

你的例外情况看起来是关于cors的

如果angular2或任何配置中有任何插件可用，请 建议我

有很多不同平台的例子，因为你要求angular 2，你可以按照这个链接，这对我很有用

---

您的例外情况与cors类似。

是

http://localhost:8080/SpringSecurityOAuth2Example/oauth/token?/

实际显示的文字路径？因为

标记？/

部分看起来像是个错误。它也与问题中显示的

http.get

请求代码完全不匹配。请求代码与问题开头显示的“POST URL”不匹配。所以很难弄清楚这里可能发生了什么，但不管怎样，如果您发送该请求的服务器使用401响应该路径的选项请求，那么您将无法让浏览器尝试该POST请求，因为您的请求添加了授权标头，它会触发您的浏览器在尝试从您的代码发送帖子之前自动执行CORS飞行前选项请求。并且错误消息指示预飞失败，因为对选项请求的响应是401，而不是浏览器需要查看的200个OK或204，以便考虑飞行前的成功。Auto0有一个非常好的一步一步的文档来做这件事和其他的事情，显然，在搜索第三方插件之前，您需要先阅读：，然后尝试

.post（`${this.baseUrl}/oauth/token`，data，{headers:this.getHeaders（）}）

。也就是说，从请求URL的末尾删除

？

。我需要一个设置，用客户机密码和用户名设置授权头。稍后我需要使用用户的凭据登录。这正是我需要的。如果您阅读了angular2 share的适当oauth2结构，那么执行上述操作对我来说不起作用http://localhost:8080/SpringSecurityOAuth2Example/oauth/token?/实际显示的文字路径？因为

标记？/

部分看起来像是个错误。它也与问题中显示的

http.get

请求代码完全不匹配。请求代码与问题开头显示的“POST URL”不匹配。所以很难弄清楚这里可能发生了什么，但不管怎样，如果您发送该请求的服务器使用401响应该路径的选项请求，那么您将无法让浏览器尝试该POST请求，因为您的请求添加了授权标头，它会触发您的浏览器在尝试从您的代码发送帖子之前自动执行CORS飞行前选项请求。并且错误消息指示预飞失败，因为对选项请求的响应是401，而不是浏览器需要查看的200个OK或204，以便考虑飞行前的成功。Auto0有一个非常好的一步一步的文档来做这件事和其他的事情，显然，在搜索第三方插件之前，您需要先阅读：，然后尝试

.post（`${this.baseUrl}/oauth/token`，data，{headers:this.getHeaders（）}）

。也就是说，从请求URL的末尾删除

？

。我需要一个设置，用客户机密码和用户名设置授权头。稍后我需要使用用户的凭据登录。这正是我需要的。如果您阅读了angular2共享的正确oauth2结构，那么执行上述操作对我不起作用。正在查找插件。您是否浏览了整个页面。是的。。他们谈论JWT代币。。但是这里的问题是oauth2 token.looking for plugin.you’s you’s to the complete page.是的。。他们谈论JWT代币。。但这里的问题是oauth2令牌。