Angular 与 Web API 承载身份验证不断失败

Question

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

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

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

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

此请求已被拒绝。

Angular代码。

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));
});

Answer 1

抱歉，我又看了一遍，上面写着 'no cors error' 所以请忽略下面的答案。

旧答案

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

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

长话短说：

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

解决方案：

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

Answer 2

如果您检查代码中的 headers，您实际上会发现它们没有被发送。 Docs HttpHeaders 描述的状态：

Immutable set of Http headers.

所以和之前的区别headers(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 is immutable — all mutation operations return a new instance.

Angular 与 Web API 承载身份验证不断失败

Angular with Web API Bearer authentication keep failing

authentication

jquery

asp.net-web-api

bearer-token

angular

旧答案