Blazor WASM发送带JWT Token的授权GET请求返回401问题

核心问题：请求头格式错误 #

你当前代码中添加请求头的方式不符合HTTP Bearer授权规范，标准的授权头格式为：

Authorization: Bearer {你的Token值}

而你的代码错误地将Header名称设为Bearer，正确写法如下：

protected override async Task OnInitializedAsync(){
    string authToken = await LocalStorage.GetItemAsStringAsync("authToken");
    // 先移除已存在的Authorization头，避免重复添加抛出异常
    if (Http.DefaultRequestHeaders.Contains("Authorization"))
    {
        Http.DefaultRequestHeaders.Remove("Authorization");
    }
    // 正确构造授权头
    Http.DefaultRequestHeaders.Add("Authorization", $"Bearer {authToken}");
    var result = await Http.GetFromJsonAsync<ApplicationDto[]>("api/Applications");
}

更优的全局配置方案 #

如果多个页面都需要发送带授权的请求，建议通过DelegatingHandler全局配置HttpClient，避免重复编写添加头的逻辑：

1. 创建自定义授权请求处理器：

public class AuthHeaderHandler : DelegatingHandler
{
    private readonly ILocalStorageService _localStorage;

    public AuthHeaderHandler(ILocalStorageService localStorage)
    {
        _localStorage = localStorage;
    }

    protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        var authToken = await _localStorage.GetItemAsStringAsync("authToken");
        if (!string.IsNullOrEmpty(authToken))
        {
            request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", authToken);
        }
        return await base.SendAsync(request, cancellationToken);
    }
}

2. 在Program.cs中注册处理器并配置HttpClient：

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddBlazoredLocalStorage();
// 注册自定义授权处理器
builder.Services.AddScoped<AuthHeaderHandler>();
// 注册带授权逻辑的命名HttpClient
builder.Services.AddHttpClient("ApiClient", client =>
{
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
})
.AddHttpMessageHandler<AuthHeaderHandler>();

builder.Services.AddOptions();
builder.Services.AddAuthorizationCore();
builder.Services.AddScoped<AuthenticationStateProvider, PortalAuthStateProvider>();
builder.Services.AddMudServices();

await builder.Build().RunAsync();

3. 在页面中注入并使用命名HttpClient：

@inject IHttpClientFactory HttpClientFactory

protected override async Task OnInitializedAsync(){
    var httpClient = HttpClientFactory.CreateClient("ApiClient");
    var result = await httpClient.GetFromJsonAsync<ApplicationDto[]>("api/Applications");
}

额外排查点 #

• 确认Token未过期，且与Postman中使用的内容完全一致（注意不要包含多余空格或换行）
• 检查API端JWT验证配置（如Issuer、Audience、密钥），确保与生成Token的配置完全匹配

内容的提问来源于stack exchange，提问作者Dsg951