使用 JWT 身份验证的 API 调用返回 401答案

【问题标题】：API calls with JWT authentication returns 401使用 JWT 身份验证的 API 调用返回 401
【发布时间】：2021-12-30 16:42:58
【问题描述】：

我有一个使用 JWT 身份验证的 .NET 6 Web API 应用程序。前端是一个角度应用程序。当我使用标头中的不记名令牌进行 API 调用时，它会返回 401 错误代码。但是使用相同的不记名令牌，我可以从 Swagger 调用相同的 API 并取回预期的数据。

我正在使用HttpClient 进行 API 调用：

import { HttpClient, HttpHeaders } from '@angular/common/http';
...
     
constructor(private httpClient: HttpClient
            private router: Router) { }
     
... 
const tokenHeader = new HttpHeaders({ "Authorization": `Bearer ${token}` }); 
const options = { headers: tokenHeader };  
return this.httpClient.post<any>(url, postParams, options);

控制台出错

请求：

预检请求：

【问题讨论】：

您只共享了请求标头。您能否分享来自浏览器的完整请求详细信息？
请求中确实没有其他详细信息...如果有帮助，我添加了预检请求详细信息
是的，OPTIONS 调用。检查我的回复。
也许this 可以帮忙？
大师您好，我的后端应用程序只接受来自 Angular 应用程序的来源...

标签： angular jwt webapi http-status-code-401 .net-6.0

【解决方案1】：

这对我有用... https://stackoverflow.com/a/55764660/10931383

将app.UseCors()移到这些之前：

app.UseHttpsRedirection()
app.UseDefaultFiles()
app.UseStaticFiles()
app.UseCookiePolicy()

【讨论】：

【解决方案2】：

需要在后端激活cors才能授权前端使用api

https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-6.0

【讨论】：

嗨，Souhail，我确实在后端激活了 Cors。我可以调用没有Authorize 属性的端点
好吧，这就是原因，干得好

【解决方案3】：

401 用于未经授权的请求。由于CORS 策略，浏览器在发出实际请求之前发出OPTIONS 调用，但浏览器不会在此类调用中发送授权标头。如您所见，OPTIONS 请求不包含令牌，因此您需要确保您的服务器不会以 401 响应 OPTIONS 请求。

【讨论】：

谢谢Harry...我一直在尝试用谷歌搜索如何从身份验证中排除选项调用，但我没有发现任何有用的...这是一个.net 核心应用程序。你知道怎么做吗？