如何在Web API项目中同端口托管Blazor应用？配置遇阻求助

仅修改launchsettings.json的端口无法实现同一端口托管，核心是要让Web API项目作为宿主，整合Blazor的资源或服务。以下是两种模式的具体实现方案：

方案1：Web API托管Blazor WebAssembly #

步骤1：添加项目引用 #

在Web API项目中，右键→添加→项目引用，选中你的Blazor Wasm项目。

步骤2：配置Web API的Program.cs #

添加静态文件与SPA代理支持，确保API路由优先，再处理Blazor的静态资源：

var builder = WebApplication.CreateBuilder(args);

// 注册API控制器服务
builder.Services.AddControllers();

// 配置Blazor Wasm静态文件托管
builder.Services.AddSpaStaticFiles(options =>
{
    // 指向Blazor Wasm编译后的输出目录，替换为你的项目名（比如"BlazorWasmApp/wwwroot"）
    options.RootPath = "../BlazorWasmApp/wwwroot";
});

var app = builder.Build();

// 中间件顺序不可颠倒
app.UseHttpsRedirection();
app.UseAuthorization();
// 先处理API请求
app.MapControllers();

// 托管Blazor静态文件
app.UseSpaStaticFiles();
app.UseSpa(spa =>
{
    // 指向Blazor Wasm项目根目录
    spa.Options.SourcePath = "../BlazorWasmApp";

    // 开发环境：代理到Blazor的开发服务器，避免频繁编译API
    if (app.Environment.IsDevelopment())
    {
        spa.UseProxyToSpaDevelopmentServer("http://localhost:5002");
    }
});

app.Run();

步骤3：调整配置文件 #

• 修改Blazor Wasm的launchsettings.json，将开发端口改为5002（与API代理地址一致），避免端口冲突。
• 简化Web API的launchsettings.json，移除Blazor相关的inspectUri配置，保留核心端口设置即可。

方案2：Web API托管Blazor Server #

步骤1：添加项目引用 #

同样在Web API项目中添加对Blazor Server项目的引用。

步骤2：配置Web API的Program.cs #

整合Blazor Server的服务与路由，确保静态文件、路由、API、Blazor中间件顺序正确：

var builder = WebApplication.CreateBuilder(args);

// 注册API控制器服务
builder.Services.AddControllers();

// 注册Blazor Server所需服务
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// 如果Blazor有自定义服务，在此注册（如builder.Services.AddScoped<MyDataService>();）

var app = builder.Build();

// 中间件顺序不可颠倒
app.UseHttpsRedirection();
// 必须添加：托管Blazor的静态资源（CSS、JS等）
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();

// 先处理API请求
app.MapControllers();

// 映射Blazor的SignalR Hub与 fallback 路由
app.MapBlazorHub();
// 指向Blazor Server的_Host.cshtml页面，确保路径正确
app.MapFallbackToPage("/_Host");

app.Run();

步骤3：调整配置文件 #

• 直接删除Blazor Server项目的launchsettings.json中重复的端口配置（或不再单独启动该项目）。
• 简化Web API的launchsettings.json，示例如下：

"DEV": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": true,
  "launchUrl": "http://localhost:5001",
  "applicationUrl": "http://localhost:5001",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
}

关键注意事项 #

• 中间件顺序：API控制器映射必须在Blazor的路由/SPA配置之前，静态文件中间件必须在路由之前。
• 路径正确性：所有指向Blazor项目的路径（如SourcePath、RootPath）要根据你的实际项目结构调整。
• 开发环境优化：Blazor Wasm开发时用代理，不需要每次修改Blazor都重新编译API，提升开发效率。

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