【发布时间】：2018-02-08 22:10:09
【问题描述】：
我正在使用角度 2 进行 oauth2。
这里是 POST URL = "http://localhost:8080/OAuth2Example/oauth/token?grant_type=password&username=bill&password=abc123"。
如何使用经过验证的用户之一在前端传递 clientId 和客户端密码并获取访问令牌？
如果在 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 无法加载 http://localhost:8080/OAuth2Example/oauth/token?/。 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:4200” 使用权。响应的 HTTP 状态代码为 401。
我在控制台看到的这个错误。
我有一个邮递员集合快照来快速确定我需要什么，我从邮递员那里获得了 oauth2，如下所示。
这正是我需要从 angular 2 中获取的。
谢谢，
【问题讨论】：
-
http://localhost:8080/SpringSecurityOAuth2Example/oauth/token?/是实际显示的文字路径吗？因为token?/部分看起来像是一个错误。它也完全不匹配问题中显示的http.get请求代码。并且该请求代码与问题开头显示的“POST URL”不匹配。所以很难弄清楚这里可能发生了什么，但无论如何，如果您发送该请求的服务器使用 401 响应该路径的 OPTIONS 请求，那么您将无法让浏览器甚至尝试该 POST 请求 -
无论如何要清楚，因为您的请求添加了一个 Authorization 标头，它会触发您的浏览器在尝试从您的代码中进行 POST 之前自动执行 CORS 预检 OPTIONS 请求。并且错误消息表明预检失败，因为对 OPTIONS 请求的响应是 401 而不是浏览器需要看到的 200 OK 或 204 才能认为预检成功。
-
Auth0 有一个非常好的分步文档来执行此操作和其他内容，在搜索第三方插件之前绝对需要阅读：auth0.com/blog/angular-2-authentication、auth0.com/docs/quickstart/spa/angular2/01-login、auth0.com/docs/quickstart/spa/angular2/01-login
-
试试
.post(`${this.baseUrl}/oauth/token`, data, {headers: this.getHeaders()})。即从请求 URL 的末尾删除?。 -
事情是我需要设置授权标头与客户端密码和用户名。稍后我需要使用用户的凭据登录。这正是我需要的。如果您阅读了正确的 oauth2 结构以与我分享 angular2，那么上述操作对我不起作用。