Blazor WebAssembly如何配置客户端与API同端口不同路径访问

阿华AIGC实验室

2026-5-7

正确配置Blazor WASM客户端与API同域名区分路径的方法

我来帮你搞定这个配置问题，你之前的错误在于把服务器的根URL改成了/api，这相当于把整个服务器的宿主路径限定在了/api下，自然找不到Blazor客户端的静态资源了。下面是一步步的正确配置方法，完全贴合你想要的「客户端走根路径、API走/api前缀」的生产环境风格：

1. 恢复服务器项目的调试URL设置

首先得把服务器的宿主路径改回根域名，因为它要同时托管Blazor静态文件和API接口：

右键服务器项目 → 选择「属性」→ 切换到「调试」标签页
将App URL改回http://localhost:52708，SSL URL保持https://localhost:44331（不要加任何后缀）
保存设置，这一步是基础，确保服务器能在根路径下响应请求

2. 给API控制器统一加上`/api`路由前缀

接下来要让所有API请求都走/api开头的路径，有两种方式可选：

方式一：逐个控制器配置（简单直接）

打开服务器项目中的每个API控制器（比如默认的WeatherForecastController），在控制器类上添加[Route("api/[controller]")]属性：

[ApiController]
[Route("api/[controller]")] // 这里加上/api前缀
public class WeatherForecastController : ControllerBase
{
    // 控制器方法的路由会自动继承前缀，比如[HttpGet]对应/api/weatherforecast
    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
        // ... 原有代码
    }
}

方式二：全局配置（适合多控制器场景）

如果你的API控制器很多，可以全局统一设置前缀，避免逐个修改：

若你用的是.NET 6+（Program.cs模式），在配置端点的地方添加前缀：
```
app.MapControllers()
   .WithMetadata(new RoutePrefixMetadata("api"));
```

若你用的是.NET 5（Startup.cs模式），在ConfigureServices中配置：

services.AddControllers(options =>
{
    options.UseCentralRoutePrefix(new RouteAttribute("api"));
});

3. 配置Blazor客户端的API请求基地址

让客户端知道API请求要发往/api路径：
打开客户端项目的Program.cs，修改AddHttpClient的基地址为https://localhost:44331/api：

builder.Services.AddHttpClient("ServerAPI", client => 
    client.BaseAddress = new Uri("https://localhost:44331/api"));

如果你的客户端用的是IHttpClientFactory或者直接注入HttpClient，确保请求的相对路径是控制器对应的路径（比如/weatherforecast），这样拼接后就是https://localhost:44331/api/weatherforecast。

4. 确认服务器的静态文件托管配置

最后要确保服务器正确托管Blazor客户端的静态资源，这是根路径能加载客户端页面的关键：

若你用的是.NET 6+（Program.cs），检查是否有以下代码：

app.UseBlazorFrameworkFiles(); // 托管Blazor框架文件
app.UseStaticFiles(); // 托管静态资源（CSS、JS等）
app.MapFallbackToFile("index.html"); // 关键！确保Blazor单页路由能正常工作
app.MapControllers(); // 映射API控制器

若你用的是.NET 5（Startup.cs），检查Configure方法：

app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapFallbackToFile("index.html"); // 必须有这行，否则Blazor路由会404
});