ASP.NET Core API 在从 React 客户端调用时返回 401

Posted

技术标签:

【中文标题】ASP.NET Core API 在从 React 客户端调用时返回 401【英文标题】:ASP.NET Core API returning 401 on call from React client 【发布时间】:2018-10-29 07:31:18 【问题描述】:

我正在开发一个带有 React/Redux 前端的全新 ASP.NET Core 2.1 SPA 应用程序。我已经实现了jwt 身份验证,它从 Azure AD B2C 获取其令牌。

当我分析我对后端的 API 调用的网络选项卡时,我看到该令牌放置在标头中 - 见下文:

这是我的 fetch 调用的代码:

import  fetchOptionsGet, fetchOptionsPost, parseJSON  from '../../utils/fetch/fetch-options';

export const getData = () => 

    return (dispatch) => fetch("/api/accounts/test", fetchOptionsGet())
        .then((response) => 

            if (response.ok) 

                parseJSON(response)
                    .then(result => 
                        // Do something here...
                    )
            
        )
;

这是我的获取选项:

export const fetchOptionsGet = () => 

    const token = authentication.getAccessToken();
    debugger
    return 
        method: 'GET',
        mode: 'cors',
        headers: 
            "Content-Type": "application/json",
            "Authentication": "Bearer " + token
        
    

请注意上面代码中的debugger,以确保我获得了确认我拥有令牌的令牌——更不用说它也是我的网络调用。

这是Startup.cs 中的ConfigureServices() 方法:

public void ConfigureServices(IServiceCollection services)

        services.AddAuthentication(options => 
             options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
         )
         .AddJwtBearer(jwtOptions => 
         jwtOptions.Authority = $"https://login.microsoftonline.com/tfp/Configuration["AzureAdB2C:Tenant"]/Configuration["AzureAdB2C:Policy"]/v2.0/";
         jwtOptions.Audience = Configuration["AzureAdB2C:ClientId"];
         jwtOptions.Events = new JwtBearerEvents
         
              OnAuthenticationFailed = AuthenticationFailed
         ;
     );

     services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

     // In production, the React files will be served from this directory
     services.AddSpaStaticFiles(configuration =>
     
         configuration.RootPath = "ClientApp/build";
     );

这是Startup.cs 中的Configure() 方法:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

    if (env.IsDevelopment())
    
       app.UseDeveloperExceptionPage();
    
    else
    
       app.UseExceptionHandler("/Error");
       app.UseHsts();
    

    app.UseHttpsRedirection();

    ScopeRead = Configuration["AzureAdB2C:ScopeRead"];
    app.UseAuthentication();

    app.UseStaticFiles();
    app.UseSpaStaticFiles();

    app.UseMvc(routes =>
    
        routes.MapRoute(
            name: "default",
            template: "controller/action=Index/id?");
    );

    app.UseSpa(spa =>
    
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        
           spa.UseReactDevelopmentServer(npmScript: "start");
        
     );

这是 API 控制器:

[Produces("application/json")]
[Route("api/[controller]")]
[Authorize]
public class AccountsController : Controller

    [HttpGet("test")]
    public async Task<IActionResult> Test()
    
        // Do something here...
    

我在Test() API 方法的开头放置了一个断点,但我没有点击它。如果没有[Authorize] 属性,我可以使用Test() API 方法并获取我的数据。所以,在我点击 API 方法之前,管道中的某些东西就阻塞了调用。

我还尝试在我的 API 控制器中指定授权方案,但没有任何区别。仍然收到 401 错误。

[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]

知道我在哪里犯了错误吗?

【问题讨论】:

在输出 -> 调试窗口中可能有一些有用的东西。看到什么了吗? 您是否在 OnAuthenticationFailed 处理程序上设置了断点? 标头名称应为Authorization @Brad 你有鹰的眼睛我的朋友!!!!你说对了。这就是问题所在!现在它工作得很好。您能否将您的回复发布为答案,以便我接受。我希望你得到你的帮助!我不能感谢你足够的伙计!我在这上面浪费了太多时间。再次感谢!!! 就我而言,[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)] 与众不同。谢谢,现在可以工作了! 【参考方案1】:

标题名称应为Authorization

export const fetchOptionsGet = () => 

    const token = authentication.getAccessToken();
    debugger
    return 
        method: 'GET',
        mode: 'cors',
        headers: 
            "Content-Type": "application/json",
            "Authorization": "Bearer " + token //<--
        
    

【讨论】:

以上是关于ASP.NET Core API 在从 React 客户端调用时返回 401的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET Core API 和 React JS

从 ASP.NET CORE Web Api 获取 React 中的特定响应标头(例如,Content-Disposition)

同时对 Asp.Net core 2.0 MVC 应用程序 (cookie) 和 REST API (JWT) 进行身份验证

无法在 ASP.Net Core Web api 中启用 CORS

在 ASP .NET Core 2.1 Web Api 中启用 CORS

在 ASP.NET Core API 中处理 id_token