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 Web Api 获取 React 中的特定响应标头(例如,Content-Disposition)
同时对 Asp.Net core 2.0 MVC 应用程序 (cookie) 和 REST API (JWT) 进行身份验证
无法在 ASP.Net Core Web api 中启用 CORS