<think>我们正在处理
一个关于在
.NET 8 Blazor WebAssembly中集成Web API的问题。根据用户的问题，我们需要提供相关的方法或问题解决。
参考引用：
[^1] 提到：如何将
Blazor WebAssembly集成到现有的ASP
.NET Core Web应用程序中。并指出
Blazor WebAssembly应用模板生成单页应用程序（SPA），它会查找ID为app的HTML元素。但在集成到现有应用时，需要禁用此功能，以便现有Web应用提供整体用户体验，同时允许合并
Blazor组件。
[^2] 是
一个视频资源，可能包含
Blazor WebAssembly的现代Web UI开发内容，但具体内容不详。
[^3] 提到了XML Web Services，即如何通过[WebMethod]属性暴露方法作为Web服务，这可能
与创建Web API有关。
用户的问题：如何在
.NET 8 Blazor WebAssembly中集成Web API？
分析：
Blazor WebAssembly (WASM) 是
一个在浏览器中运行
.NET代码的客户端框架。它通常需要
与服务器端的API进行通信以获取数据。
在
Blazor WebAssembly中集成Web API，通常涉及以下步骤：
1
. 创建或使用现有的Web API项目（可以是ASP
.NET Core Web API）。
2
. 在
Blazor WebAssembly客户端中，使用HttpClient来调用Web API。
但是，根据引用[^1]的上下文，用户可能是在
一个现有的ASP
.NET Core Web应用程序中集成
Blazor WebAssembly，并且希望在这个现有应用中同时提供Web API和
Blazor组件。
因此，我们可以考虑两种常见场景：
场景1：
Blazor WebAssembly应用和Web API是两个独立的应用（可能部署在不同的域名下）。
场景2：
Blazor WebAssembly应用和Web API在同
一个ASP
.NET Core项目中（同源），这样部署更方便。
由于引用[^1]提到“集成到现有的ASP
.NET Core Web应用程序”，我们重点考虑场景2：将
Blazor WebAssembly集成到现有的ASP
.NET Core应用中，同时该应用也提供Web API。
步骤概述：
1
. 在现有的ASP
.NET Core应用程序中，添加对
Blazor WebAssembly的支持（服务注册和中间件配置）。
2
. 创建
Blazor组件（可能在单独的项目中，然后集成到现有应用，或者直接在现有应用中创建）。
3
. 配置现有应用的路由，以便处理
Blazor的路由和静态资源。
4
. 在现有应用中创建Web API控制器。
5
. 在
Blazor组件中使用HttpClient调用这些Web API。
详细步骤：
步骤1：在现有ASP
.NET Core应用中添加
Blazor WebAssembly支持
- 确保项目是
.NET 8（因为用户指定
.NET 8）。
- 在现有项目中，添加对
Blazor WebAssembly的支持。可以通过修改`Startup
.cs`（或`Program
.cs`）来实现。
步骤2：创建
Blazor组件
- 可以在现有项目中创建
一个`Components`文件夹，然后添加`
.razor`文件（例如`Counter
.razor`）。
- 或者，如果你有
一个独立的
Blazor WebAssembly项目，你可以将其作为Razor类库发布，然后在现有项目中引用。
步骤3：配置现有应用的路由和静态资源
- 在`Program
.cs`中，添加静态文件中间件（用于提供
Blazor的静态文件）和路由配置。
- 需要设置
Blazor的根组件和路由。
步骤4：创建Web API控制器
- 在现有项目中，添加
一个API控制器，例如`WeatherForecastController`，并定义API方法。
步骤5：在
Blazor组件中调用Web API
- 在
Blazor组件中，注入`HttpClient`（通过`@inject HttpClient Http`），然后使用它来调用API。
但是，引用[^1]提到需要禁用
Blazor WebAssembly的默认SPA行为，因为它会接管整个页面。因此，我们需要将
Blazor作为组件集成，而不是整个应用。
具体实现（基于引用[^1]的提示）：
1
. 在现有ASP
.NET Core Web应用的页面中（例如
一个Razor页面或MVC视图），我们想要嵌入
一个
Blazor组件。
2
. 我们需要在该页面中引用
Blazor的脚本，并初始化
Blazor组件到指定的HTML元素（而不是整个页面）。
如何禁用
Blazor的默认启动？
- 通常，
Blazor WebAssembly模板会在`index
.html`中有
一个`<script>`标签来启动应用。但在集成到现有应用时，我们不希望它自动启动。
- 我们可以手动启动
Blazor，并且只在需要的地方挂载组件。
具体步骤：
1
. 在现有应用的布局页面（如`_Layout
.cshtml`）或特定页面中，添加
一个用于承载
Blazor组件的元素，例如：
```html
<div id="my-
blazor-component"></div>
```
2
. 在该页面底部，添加
Blazor的脚本引用，并手动启动
Blazor，并指定要挂载的组件和挂载点：
```html
<script src="_framework/
blazor.webassembly.js"
autostart="false"></script>
<script>
Blazor.start
({
// 禁用自动启动后，手动指定要加载的组件
loadBootResource: function
(type, name, defaultUri, integrity
) {
// 可以自定义资源加载，或者使用默认行为
return defaultUri;
}
}
).then
(function
() {
// 在
Blazor启动后，手动挂载组件到指定元素
const container = document
.getElementById
('my-
blazor-component'
);
Blazor.rootComponents
.add
(container, 'component', { }
);
}
);
</script>
```
3
. 注意：上述代码
中的`'component'`应该替换为你要挂载的组件的类型名，例如`'Counter'`（对应Counter
.razor组件）。
4
. 另外，为了在同
一个项目中同时提供Web API和
Blazor组件，我们需要确保Web API的路由不会
与Blazor组件的路由冲突。通常，Web API的路由以`/api`开头，而
Blazor组件的路由则通过前端路由处理。
5
. 在
Blazor组件中调用Web API：
- 由于
Blazor WebAssembly运行在客户端，调用API时使用相对路径（如果API和
Blazor应用在同
一个域下）即可。
- 例如，在组件中：
```csharp
@inject HttpClient Http
// 在初始化时加载数据
protected override async Task OnInitializedAsync
()
{
forecasts = await Http
.GetFromJsonAsync<WeatherForecast[]>
("api/weatherforecast"
);
}
```
6
. 注意：在同
一个项目中，
Blazor WebAssembly应用和Web API共享同
一个基础地址，因此相对路径可以工作。
7
. 如果
Blazor WebAssembly应用和API在不同项目中（跨域），则需要在API项目中配置CORS，并在
Blazor中使用完整的URL（或者使用代理在开发时解决跨域）。
8. 在同
一个项目中，我们可以在`Program
.cs`中同时设置
Blazor和API：
```csharp
var builder = WebApplication
.CreateBuilder
(args
);
// 添加服务
builder
.Services
.AddControllers
(); // 添加API控制器
builder
.Services
.AddRazorPages
(); // 如果使用Razor页面
// 添加
Blazor所需的服务
builder
.Services
.Add
ServerSide
Blazor(); // 如果同时使用
Server端
Blazor，但这里我们主要用
WASM，注意：
WASM是客户端，不需要
ServerSide
Blazor服务，但需要提供静态文件和启动配置
var app = builder
.Build
();
// 配置中间件
app
.UseStaticFiles
(); // 提供静态文件（包括
Blazor的wwwroot下的文件）
app
.UseRouting
();
app
.MapControllers
(); // 映射API控制器
// 对于
Blazor WebAssembly，我们需要提供_index
.html和
Blazor所需的静态文件，并且设置回退路由（如果使用SPA
模式）
// 但是，由于我们是在现有应用中嵌入，不需要设置回退路由，而是设置特定路由提供
Blazor的启动文件。
// 另外，我们需要
一个页面来承载
Blazor组件（例如
一个Razor页面），在这个页面中我们放置了挂载点。
app
.MapRazorPages
(); // 或者MapControllers，MapDefaultControllerRoute等
// 注意：
Blazor WebAssembly的静态文件（包括程序集和wwwroot下的文件）应该放在wwwroot文件夹下，并且通过UseStaticFiles提供。
app
.Run
();
```
9
. 如何将
Blazor WebAssembly的文件放入现有应用的wwwroot？
- 如果你有
一个独立的
Blazor WebAssembly项目，可以将其发布，然后将发布输出的文件复制到现有ASP
.NET Core项目的wwwroot中（例如wwwroot/
blazor文件夹）。
- 然后在页面中引用脚本时，路径为`/
blazor/_framework/
blazor.webassembly.js`。
10
. 或者，你可以将
Blazor项目作为现有项目的
一部分（同
一个解决方案），然后使用项目引用。在
.NET 8中，
Blazor WebAssembly项目可以引用ASP
.NET Core项目，反之则不行（因为
WASM是客户端）。但是，我们可以将
Blazor项目设置为现有ASP
.NET Core项目的子项目，并在构建时将其输出复制到wwwroot。
11
. 在现有ASP
.NET Core项目中，我们可以添加对
Blazor项目的引用，并配置构建后事件复制文件。
但是，更简单的方式是使用Visual Studio的“托管”
模式：创建
一个
Blazor WebAssembly应用（托管），这样会生成三个项目：客户端、服务器和共享项目。其中服务器项目就是ASP
.NET Core项目，它已经集成了Web API和
Blazor客户端的托管。
因此，如果用户是从头开始，建议使用托管
模式。但用户是集成到现有应用，所以需要手动集成。
总结：
在现有ASP
.NET Core Web应用程序中集成
Blazor WebAssembly并同时提供Web API，需要：
- 在现有应用中配置
Blazor WebAssembly的静态文件服务和手动启动。
- 在现有应用中添加API控制器。
- 在需要嵌入
Blazor组件的页面中手动挂载组件。
- 在
Blazor组件中使用HttpClient调用同
一项目
中的Web API（通过相对路径）。
问题解决：
- 跨域问题：如果API和
Blazor应用不在同
一个域，需要配置CORS。
- 身份认证：如果API需要认证，需要在
Blazor中实现认证（通常使用Microsoft Authentication Library等）。
根据引用[^3]，我们还可以考虑使用[WebMethod]来创建Web服务（ASMX），但这不是现代做法，现代Web API使用控制器。
因此，我们推荐使用ASP
.NET Core Web API控制器。
相关问题：
1
. 在
Blazor WebAssembly中如何调用Web API？
2
. 如何在
一个项目中同时托管
Blazor WebAssembly和Web API？
3
. 如何解决
Blazor WebAssembly应用
与Web API之间的跨域问题？
4
. 如何在现有ASP
.NET Core应用中嵌入
Blazor组件而不是整个应用？
5
. 在
Blazor WebAssembly中调用Web API时如何实现身份验证？
现在，我们生成相关问题。</think>### 在
.NET 8 Blazor WebAssembly 中集成 Web API 的方法
#### 1
. **基础集成方法**
在
Blazor WebAssembly 中调用 Web API 的核心是通过 `HttpClient` 服务：
```csharp
// 在组件中注入 HttpClient
@inject HttpClient Http
// 调用示例
private async Task GetDataAsync
()
{
var response = await Http
.GetFromJsonAsync<WeatherForecast[]>
("api/weatherforecast"
);
// 处理响应数据
...
}
```
**关键配置**：
- 在 `Program
.cs` 注册 `HttpClient`：
```csharp
builder
.Services
.AddScoped
(sp =>
new HttpClient {
BaseAddress = new Uri
(builder
.HostEnvironment
.BaseAddress
)
}
);
```
- Web API 控制器需放在 `
Server` 项目（托管项目）的 `Controllers` 目录
- 确保 API 路由以 `/api` 开头（如 `[Route
("api/[controller]"
)]`）
#### 2
. **解决跨域问题（CORS）**
若 API
与 Blazor 不同源：
```csharp
//
Server 项目的 Program
.cs
builder
.Services
.AddCors
(options =>
{
options
.AddPolicy
("Allow
Blazor", policy =>
policy
.WithOrigins
("https://your-
blazor-domain"
)
.AllowAnyMethod
()
.AllowAnyHeader
());
}
);
app
.UseCors
("Allow
Blazor"
);
```
在
Blazor 中调用时使用完整 API URL：
```csharp
Http
.GetFromJsonAsync<WeatherForecast[]>
("https://api-domain
.com/weatherforecast"
);
```
#### 3
. **集成到现有 ASP
.NET Core 应用**
根据引用[^1]，禁用默认 SPA 行为并手动挂载组件：
1
. 移除 `index
.html`
中的自动初始化脚本
2
. 在现有页面添加挂载点：
```html
<div id="
blazor-container"></div>
```
3
. 手动初始化
Blazor：
```javascript
Blazor.start
().then
(() => {
Blazor.rootComponents
.add
('
blazor-container', 'counter', {}
);
}
);
```
#### 4
. **身份验证集成**
使用 Microsoft 身份认证库：
```csharp
// Program
.cs
builder
.Services
.AddMsalAuthentication
(options => {
options
.ProviderOptions
.Authentication
.Authority = "https://login
.microsoftonline
.com/
...";
options
.ProviderOptions
.Authentication
.ClientId = "your-client-id";
}
);
```
在 API 调用中自动附加 Token：
```csharp
Http
.GetFromJsonAsync<WeatherForecast[]>
("api/secure-data"
);
```
#### 5
. **性能优化**
- **预渲染**：在 `
Server` 项目中启用：
```csharp
endpoints
.MapFallbackToFile
("index
.html"
).AddPreRendering
();
```
- **AOT 编译**：在 `
.csproj` 中添加：
```xml
<RunAOTCompilation>true</RunAOTCompilation>
```
**常见问题解决**：
- **404 错误**：检查 API 控制器是否在 `
Server` 项目且使用 `[ApiController]` 属性
- **序列化错误**：确保 DTO 类使用 `public` 修饰符
- **部署问题**：确保 Web API 和
Blazor 应用部署到同
一域名下避免 CORS
---
### 相关问题
1
. 如何在
Blazor WebAssembly 中处理 Web API 的认证和授权？
2
. Blazor WebAssembly 调用 Web API 时如何优化网络请求性能？
3
. 当
Blazor WebAssembly 和 Web API 部署在不同服务器时，如何配置安全通信？
4
. 如何在现有 MVC 应用中逐步迁移到
Blazor WebAssembly 并保留 Web API？
5
. Blazor WebAssembly 中如何处理 Web API 的错误响应和重试机制？
[^1]: 如何将
Blazor WebAssembly集成到现有的ASP
.NET Core Web应用程序中
[^2]: Modern Web UI with
Blazor WebAssembly
[^3]: XML Web Services in the Microsoft
.NET Framework
扫一扫
231
到【灌水乐园】发言
