.NET7托管Blazor WASM迁移至.NET8 Blazor Web App通信异常求助

1. 检查客户端HttpClient的BaseAddress配置 #

在.NET8 Blazor Web App的交互式WASM模式下，客户端HttpClient的BaseAddress配置是关键：

• 确认客户端Program.cs中的代码是否正确绑定了服务器地址：

  builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
  

  这里的builder.HostEnvironment.BaseAddress应自动指向服务器根地址（比如本地调试的https://localhost:5001/），如果手动指定地址，要确保末尾带斜杠，避免拼接URI时出错。

2. 服务器端API路由与服务注册顺序 #

服务器端的Controllers注册和路由配置顺序不能错，否则API无法被正确路由：

• 正确的服务器Program.cs配置示例：

  var builder = WebApplication.CreateBuilder(args);
  // 先添加Controllers服务
  builder.Services.AddControllers();
  var app = builder.Build();
  
  app.UseRouting();
  app.UseAuthorization();
  // 必须在UseRouting之后、UseAuthorization之后添加API路由映射
  app.MapControllers();
  // 然后配置Blazor相关中间件
  app.MapBlazorHub();
  app.MapFallbackToFile("index.html");
  
  app.Run();
  

  注意：服务器端的AddHttpClient是给服务器自身调用外部API用的，客户端的HttpClient配置完全在客户端Program.cs中，不需要在服务器端重复添加。

3. 组件中API调用的路径格式 #

组件中调用API时，若使用相对路径，必须确保HttpClient的BaseAddress已正确设置：

• 组件中注入HttpClient后，调用API的相对路径要和BaseAddress拼接为有效绝对路径：

  @inject HttpClient Http
  // 正确调用示例（依赖BaseAddress拼接为绝对路径）
  var response = await Http.GetFromJsonAsync<MyModel>("api/MyController/MyAction");
  

  确认组件中注入的HttpClient是客户端Program.cs配置的实例，没有被其他代码覆盖BaseAddress。

4. .NET8 Blazor模式差异的影响 #

如果使用Interactive Auto或Interactive Server模式，客户端代码可能在服务器端运行，此时HttpClient的BaseAddress需要指向服务器的外部可访问地址：

• 若本地调试时发现BaseAddress获取异常，可以手动指定：

  builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://localhost:5001/") });
  

5. 跨域配置（部署环境注意） #

如果客户端和服务器部署在不同域名/端口下，需要在服务器端配置跨域：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowClient", policy =>
    {
        policy.WithOrigins("https://your-client-domain.com")
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

// 在UseRouting之后添加跨域中间件
app.UseCors("AllowClient");

内容的提问来源于stack exchange，提问作者Hashim Al-Mansouri