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

Posted 2023-03-10

【中文标题】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 //<--