Axios 未对 API 进行身份验证答案

【问题标题】：Axios not authenticating to APIAxios 未对 API 进行身份验证
【发布时间】：2020-04-19 15:31:44
【问题描述】：

我整天都在尝试从我的 Asp.Net Api 获取数据，但无济于事。我登录并从服务器获取身份验证令牌并将其存储在本地，但是当我尝试执行任何需要身份验证的操作时，服务器返回 401 响应。我的代码有什么地方做错了吗？当我使用邮递员之类的工具时，一切正常，但在我的应用程序中却不行。这是我的登录名

try {
      response = await API.post(AuthUrl, credentials)
      if(response.status >= 200 || response.status <= 299){
        let Auth = {
          Username: response.data.Username,
          Roles: response.data.Roles,
          Expires: response.data.Expires,
          Token: response.data.Token
        };
        localStorage.setItem(window.location.host, JSON.stringify(Auth));
    }
}

这是我的 axios 封装器

export default axios.create({
    baseURL: BaseUrl,
    responseType: "json",
    auth: `Bearer ${localStorage.getItem(window.location.host) == null? "" : JSON.parse(localStorage.getItem(window.location.host)).Token}`
})

这就是我的消费方式

try{
                const response = await API.get(getUrl)
                setLoading(false);
               //........Do something with response
}

这是在服务器上记录的内容

Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/2.0 GET https://localhost:44307/api/classes/getclasses/  
Microsoft.AspNetCore.Cors.Infrastructure.CorsService:Information: CORS policy execution successful.
Microsoft.AspNetCore.Routing.EndpointMiddleware:Information: Executing endpoint 'SchoolManager.Web.Controllers.ClassesController.GetClasses (SchoolManager.Web)'
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Route matched with {action = "GetClasses", controller = "Classes", page = "", area = ""}. Executing controller action with signature System.Collections.Generic.IEnumerable`1[SchoolManager.Dtos.Tenancy.ClassDto] GetClasses(System.String, System.String) on controller SchoolManager.Web.Controllers.ClassesController (SchoolManager.Web).
Microsoft.AspNetCore.Cors.Infrastructure.CorsService:Information: CORS policy execution successful.
Microsoft.AspNetCore.Authorization.DefaultAuthorizationService:Information: Authorization failed.
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Authorization failed for the request at filter 'Microsoft.AspNetCore.Mvc.Authorization.AuthorizeFilter'.
Microsoft.AspNetCore.Mvc.ChallengeResult:Information: Executing ChallengeResult with authentication schemes (Bearer).
Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler:Information: AuthenticationScheme: Bearer was challenged.
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Executed action SchoolManager.Web.Controllers.ClassesController.GetClasses (SchoolManager.Web) in 146.8824ms
Microsoft.AspNetCore.Routing.EndpointMiddleware:Information: Executed endpoint 'SchoolManager.Web.Controllers.ClassesController.GetClasses (SchoolManager.Web)'
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 218.2724ms 401

【问题讨论】：

可能是 CORS 问题。你查了吗stackoverflow.com/questions/31942037/…
从我的 API 端点，它显示 CORS 已成功执行，但未能通过身份验证。我认为身份验证令牌没有发送到服务器。虽然当我在它上面放置断点时，令牌是从localStorage 检索的。看看我的编辑中的日志记录
这肯定是 CORS 问题。您还必须在服务器中启用 CORS 并尝试将 responseType 更改为 application/json。此外，Postman 并不关心 CORS 请求。
但是您知道服务器正在接受身份验证请求并发送回令牌吗？
或者有没有比使用 axios 更好的方法来执行 API 请求和保存会话？我的反应应用程序只是一个 API 使用者。它没有任何自己的应用程序逻辑。

标签： reactjs asp.net-core axios asp.net-core-webapi

【解决方案1】：

axios.create方法的使用方式不对。参考：https://github.com/axios/axios#request-config

文档清楚地显示 config auth: 表明应该使用 HTTP 基本身份验证，并提供凭据。对于 Bearer 令牌等，请改用 Authorization 自定义标头，以便在您的情况下您可以执行类似的操作

export default axios.create({
baseURL: BaseUrl,
responseType: "json",
headers: {'Authorization': "bearer " + JSON.parse(localStorage.getItem(window.location.host)).Token}})

【讨论】：