Blazor WASM请求被CORS拦截 ASP.NET Core 6跨域配置问题

• CORS允许源配置不匹配：你当前CORS策略仅放行源https://localhost:7198，但浏览器报错明确显示Blazor WASM应用的实际运行源为https://localhost:44338，源校验不通过时API不会返回CORS相关响应头，直接触发浏览器拦截。
• Blazor端服务注册冲突：你先手动注册了TestService单例，后续又通过AddHttpClient为ITestService/TestService配置了带BaseAddress的HttpClient，DI容器会优先使用前面手动注册的无配置实例，可能导致请求地址异常。
• 你当前的CORS中间件顺序（UseRouting->UseCors->UseEndpoints）是正确的，不需要调整。

1. 修正API端CORS配置 #

将CORS策略中的允许源修改为WASM应用实际运行的源地址，注意地址不要带末尾斜杠，必须和浏览器请求头中的Origin值完全一致。本地开发阶段如果需要适配localhost下任意端口，可以临时使用源判断逻辑简化配置，生产环境必须明确指定固定的允许源。
修正后的Startup代码：

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddDefaultPolicy(builder =>
            {
                builder
                    // 配置WASM应用实际运行的源地址
                    .WithOrigins("https://localhost:44338")
                    // 本地开发临时适配localhost所有端口可替换为下面这行，生产环境请删除
                    // .SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost")
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    // 如果后续需要携带Cookie/Authorization认证头，追加下面这行
                    // .AllowCredentials()
                    ;
            });
        });

        services.AddControllers();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseRouting();

        // CORS中间件必须放在Routing之后，认证、授权、Endpoint之前
        app.UseCors();

        // 后续新增认证授权中间件请放在UseCors之后
        // app.UseAuthentication();
        // app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
}

2. 修正Blazor端服务注册 #

删除多余的TestService单例注册，避免DI注入冲突，修正后的Program.cs注册代码：

// 删除重复的单例注册
// builder.Services.AddSingleton<TestService>();
builder.Services.AddHttpClient<ITestService, TestService>(client =>
{
    client.BaseAddress = new Uri("https://localhost:7030/api/v1/");
});

3. 验证注意事项 #

• 修改完API配置后必须重启API项目，WASM应用运行端口变更后要同步更新CORS允许源配置
• 不要使用浏览器控制台提示的no-cors请求模式，该模式下无法正常读取API返回的响应内容，仅适用于不需要获取返回值的静态资源请求
• 如果API启用了HTTPS重定向、HSTS等中间件，确保WASM端请求地址和API实际监听地址完全一致，避免跳转导致CORS响应头丢失

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