【问题标题】：Angular with Web API Bearer authentication keep failing带有 Web API Bearer 身份验证的 Angular 不断失败
【发布时间】：2018-05-08 23:43:26
【问题描述】：

在 dot net framework 4.6.1 上使用 Angular 5 和 Web Api 版本为 5.2.3 开发新应用程序。该 api 只是一个新的 Web Api 项目，在 VS2017 上创建了个人身份验证。 api 的唯一变化是 Startup.Auth.cs 中的以下行，添加了 Cors 库以允许 cors。

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

从 Angular 应用程序，登录和注册工作正常，但在调用 Web Api 时无法授权，包括 api/Account/Logout 等端点。

继续失败并出现此错误。没有 cors 错误。

此请求的授权已被拒绝。

角度代码。

var token = localStorage.getItem("accessToken");
let headers = new HttpHeaders();
headers.set('Authorization', 'Bearer ' + token);

this._http.post(environment.authApiUrl + 'api/Account/Logout', { headers: headers}).subscribe(
  data => {
    localStorage.removeItem("userName");
    localStorage.removeItem("accessToken");

    this.isLoggedin = false;        
    this._router.navigate(['/home']);
  },
  errors => console.log(errors)
);

我想不出我做错了什么，所以试图用 jquery 重写。奇迹般有效。 Api 完全没有变化。我在 Angular 中做错了什么？

var token = localStorage.getItem("accessToken");
var headers:any = {};
headers.Authorization = 'Bearer ' + token;
$.ajax({
  type: 'POST',
  url: environment.authApiUrl + 'api/Account/Logout',
  headers: headers
}).done(function (data) {
    toastr.info(JSON.stringify(data));
}).fail(function (err) {
  toastr.error(JSON.stringify(err));
});

【问题讨论】：

请分享有关错误的详细信息。你想做什么，什么工作，究竟是什么错误......

标签： jquery angular authentication asp.net-web-api bearer-token

【解决方案1】：

如果您要检查代码中的标头，您实际上会看到它们没有被发送。 Docs状态为HttpHeaders的描述：

一组不可变的 Http 标头。

所以与之前的标头 (Http) 不同，您可以这样做：

let headers = new Headers();
headers.set('Authorization', 'Bearer ' + token);

现在 (HttpClient) 你需要做的：

let headers = new HttpHeaders()
  .set('Authorization', 'Bearer ' + token)

或者：

let headers = new HttpHeaders()
headers = headers.set('Authorization', 'Bearer ' + token);

because...

HttpHeaders 是不可变的——所有变异操作都返回一个新实例。

【讨论】：

这确实是问题所在。它现在就像一个魅力。非常感谢。

【解决方案2】：

对不起，我又读了一遍，上面写着“没有 cors 错误”，所以忽略下面的答案。

旧答案

我不能确切地说 Angular 和 jQuery 方式之间的区别是什么，我假设一个是 XHR，另一个是 fetch .. 但不要在这里钉我。

我遇到过类似的问题，当您收到“No cors”错误时，这意味着该请求实际上仍然可以正常工作，但您的浏览器会尝试在此处保护您。我强烈的感觉是 Angular 使用了一种技术，这种浏览器机制可以发挥作用，而 jQuery 却没有。

长话短说：

问题在于前端 URL 与您的后端不同。您的浏览器不喜欢它并执行预检请求。

解决方案：

要么在后端设置 CORS，要么
使用 jsonp 代替 https://angular.io/api/http/Jsonp，或者
前端和后端在同一个 url 上工作

【讨论】：