如何解决无法调用 REST API 以使用 JWT 身份验证检索数据
我正在测试一个使用 JWT 令牌调用 REST API 的 WebAssembly 应用程序。它可以成功登录并获取存储在本地存储中的 JWT 令牌。使用 JWT 令牌调用 REST API 时,执行 httpClient.GetAsync(url) 时会记录错误。这些错误是在托管 WebAssempbly 应用程序的 Kestrel Web 服务器中生成的(请参阅“Kestrel Web 服务器中的错误”部分中的错误消息)。
在调用 API 的 FetchData.Razor 程序中发生错误(请参阅下面“program.cs”部分中的详细信息)。
实际上,httpClient.GetAsync 并没有触发这个程序中的异常。 response.IsSuccessstatusCode 的值为 true。但返回的数据包含错误(详见“Http 响应中的数据”部分)。错误是在托管 WebAssembly 应用程序的 Web 服务器上生成的,而不是在客户端生成。
以下是有关此测试应用的其他信息:
- WebAPI(服务器端)和 WebAssembly 应用(客户端)都在开发人员的计算机上运行,具有 2 个端口号
- 使用 PostMan 测试成功通过 JWT 访问 WebApI
- 使用配置设置在 WebAPI 应用程序中启用 CORS:builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod()
- 我还在 PostMan 客户端测试了存储在 LocalStorage 中的 JWT 令牌,并且能够使用 API 检索数据
- WebAssemply 应用是使用 .NET 5 构建的。program.cs 中配置的服务列在“program.cs”部分
- 为了确保 WebAPI 应用程序正常工作,我开发了另一个控制台应用程序,它使用 JWT 身份验证调用 REST API。它工作正常。
我一直无法弄清楚 WebAssembly 应用程序中错误的根本原因是什么。我将非常感谢您在问题排查方面的帮助或建议。
*********************************************************************************
**** Errors in Kestrel Web server
*********************************************************************************
info: Microsoft.Hosting.Lifetime[0]
Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
Content root path: C:\projects\my_tryout\WebAssemblyAuth\WebAssemblyAuth
Hosting environment: Production
Content root path: C:\projects\my_tryout\WebAssemblyAuth\WebAssemblyAuth
Now listening on: http://127.0.0.1:61237
Application started. Press Ctrl+C to shut down.
fail: Microsoft.WebAssembly.Diagnostics.DevToolsProxy[0]
sending error response for id: msg-43F36125C29A8C9BEE3C542FCAA03D8E:::1027 ->
[Result: IsOk: False,IsErr: True,Value:,Error: {
"result": {
"type": "object","subtype": "error","description": "Cannot find member named 'json'.","className": "ReferenceError"
}
} ]
fail: Microsoft.WebAssembly.Diagnostics.DevToolsProxy[0]
sending error response for id: msg-43F36125C29A8C9BEE3C542FCAA03D8E:::1028 ->
[Result: IsOk: False,"className": "ReferenceError"
}
} ]
*********************************************************************************
****** program.cs
*********************************************************************************
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
// wiring up for Dependency Injections
builder.Services.AddScoped<IAuthenticationService,AuthenticationService>();
builder.Services.AddblazoredLocalStorage();
builder.Services.AddAuthorizationCore();
builder.Services.AddScoped<AuthenticationStateProvider,AuthStateProvider>();
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
}
}
*********************************************************************************
****** Code segment in FetchData.Razor
*********************************************************************************
protected override async Task OnInitializedAsync()
{
token = await localStorage.GetItemAsync<string>("authToken");
if (!string.IsNullOrEmpty(token))
{
string url = "https//localhost:44360/api/genes";
httpClient.DefaultRequestHeaders.Authorization =
new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer",token);
var response = await httpClient.GetAsync(url);
if (response.IsSuccessstatusCode)
{
data = response.Content.ReadAsstringAsync().Result;
hasData = !string.IsNullOrEmpty(data);
}
else
{
data = $"Error ReasonPhrase: {response.ReasonPhrase},StatusCode={response.StatusCode} ";
}
}
}
*********************************************************************************
****** Data in Http response:
*********************************************************************************
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>WebAssemblyAuth</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="WebAssemblyAuth.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui"> An unhandled error has occurred.
<a href="" class="reload">Reload</a> <a class="dismiss">?</a>
</div> <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。