无法调用 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 服务器上生成的，而不是在客户端生成。

以下是有关此测试应用的其他信息：

1. WebAPI（服务器端）和 WebAssembly 应用（客户端）都在开发人员的计算机上运行，​​具有 2 个端口号
2. 使用 PostMan 测试成功通过 JWT 访问 WebApI
3. 使用配置设置在 WebAPI 应用程序中启用 CORS：builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod()
4. 我还在 PostMan 客户端测试了存储在 LocalStorage 中的 JWT 令牌，并且能够使用 API 检索数据
5. WebAssemply 应用是使用 .NET 5 构建的。program.cs 中配置的服务列在“program.cs”部分
6. 为了确保 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 (将#修改为@）