Angular 5 Web Api 令牌授权不起作用

Question

我正在尝试为 Angular5 客户端和 WebApi 服务器应用程序实施令牌授权。我已经设法创建了相关项目的 WebApi 部分，当我尝试通过 "POSTMAN" 获取令牌时，我得到了很好的回应： Postman request and server answer

我正在尝试使用 Angular5 实现相同的目标。这是我从 angular:

打来的电话

login(user: string, pass: string) {
    let params = new HttpParams()
        .append('grant_type', 'password')
        .append('username', user)
        .append('password', pass);
    let headers = new HttpHeaders()
        .set('Content-Type', 'application/x-www-form-urlencoded');
 return this._http.post<boolean>('auth', params, { headers: headers });
}

当我运行这样做时，我一直从服务器获取 "bad request"。Chrome response

如果有人有任何想法，我将不胜感激。提前致谢。

Answer 1

感谢大卫的帮助。我尝试了您的解决方案，但在更改我的 WebAPI CORS 设置之前它没有帮助。问题出在 Pre-flight CORS 请求上。我按照 this article 中的说明进行操作，这解决了我的问题。

简而言之：

我在我的 WebAPI 上清除了所有关于 CORS 的设置并安装了 Microsoft.Owin.Cors 包。
然后我修改了App_Start\Startup.Auth.cs文件中的ConfigureAuth方法，代码如下：

public void ConfigureAuth(IAppBuilder app) { app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);<br> app.UseOAuthBearerTokens(OAuthOptions); }

这解决了问题，即使我的代码在 Angular 中来自问题。现在可以正常使用了。

Angular 5 Web Api 令牌授权不起作用

Angular5 WebApi token authorization not working

authorization

token

asp.net-web-api

angular

angular5