Blazor WASM客户端调用API遇System.InvalidOperationException异常

问题根源 #

1. CORS响应头暴露限制：浏览器同源策略会屏蔽非CORS安全的自定义响应头，除非API端显式配置暴露这些头。AllowAnyHeader仅控制客户端可发送的请求头，不影响响应头的可见性。
2. 头名称拼写错误：客户端代码中使用了"X- Pagination"（含空格），但API端设置的是"X-Pagination"，名称不匹配导致找不到。

解决步骤 #

1. 更新API的CORS配置，暴露自定义响应头 #

修改Startup类中的CORS策略，添加WithExposedHeaders("X-Pagination")，确保浏览器允许客户端访问这个自定义头：

services.AddCors(
    options =>
    {
        options.AddDefaultPolicy(builder =>
        {
            builder.WithOrigins(
                "https://localhost:44366",
                "http://localhost:44366")
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials() // 若需携带Cookie等凭证可添加
            .WithExposedHeaders("X-Pagination"); // 关键配置：暴露自定义响应头
        });
    })

注意：WithOrigins中的地址不要带尾斜杠（/），避免匹配异常。

2. 修正客户端代码中的头名称错误 #

将客户端获取头的代码里的"X- Pagination"改为"X-Pagination"，去掉中间的空格：

MetaData = JsonSerializer.Deserialize<MetaData>(response.Headers.GetValues("X-Pagination").First(), _options)

3. 确保API端正确启用CORS中间件 #

在Startup的Configure方法中，需在UseRouting之后、UseEndpoints之前调用UseCors()：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他中间件...
    app.UseRouting();
    
    app.UseCors(); // 启用CORS中间件
    
    app.UseAuthorization();
    
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

验证 #

完成以上修改后，重启API和Blazor客户端，调用接口即可正常获取X-Pagination头的值。

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