asp.net-core - 如何像 JavaScript-SPA 一样托管 ASP.NET API 和 Blazor Web 程序集?
问题描述
语境:
我们想要创建一个在客户端使用 Blazor WebAssembly 运行的单页应用程序。在服务器端,该解决方案有一个 ASP.NET MVC,其中包括一些用于我们的 REST API 的 ApiController 类。
我们希望在服务器端使用 ASP.NET API 而不是 Blazor Server,因为我们希望为未知的消费者提供带有 ApiController 类的 REST 接口。
这是我在单个解决方案中的客户端(Blazor WebAssembly)和服务器端(ASP.NET API)项目:
第一次尝试通过我们的组件中的 Blazor 的 HttpClient 类请求 API FetchData
:
@inject HttpClient Http
...
@code {
private TodoItem[] TodoItems;
protected override async Task OnInitializedAsync()
{
TodoItems = await Http.GetJsonAsync<TodoItem[]>("api/ToDo");
}
}
在服务器端,API-Controller 看起来像:
namespace ToDoListAPI.Controllers
{
[Route("api/[controller]")]
[ApiController]
[Produces("application/json")]
public class ToDoController : ControllerBase
{
[HttpGet]
public string IGetAll()
{
var lResult = new List<ToDoList.TodoItem>();
// create dummies
for (var i = 0; i < 10; i++)
{
lResult.Add(new ToDoList.TodoItem() { Title = $"Title {i}", IsDone = false });
}
return JsonSerializer.Serialize(lResult);
}
}
}
问题:在我的 Blazor WebAssembly 项目中,对 API 的请求失败。Blazor WebAssembly 项目通过https://localhost:44340/托管,API 通过https://localhost:44349/托管。如何像使用 JavaScript 框架一样托管这两个项目?
解决方案
您可以,具体取决于您希望如何托管和部署您的解决方案:
2 个不同主机中的 API 和应用程序
在 API 项目启动类中启用 CORS:
public void Configure(IApplicationBuilder app)
{
...
app.UseCors(configure =>
{
// configure here your CORS rule
}
...
}
多合一主机
在您的 API 项目中
- 添加包引用
Microsoft.AspNetCore.Components.WebAssembly.Server
Startup
在您的班级中设置 Blazor 服务器
public void Configure(IApplicationBuilder app)
{
app.UseBlazorFrameworkFiles();
...
app.UseEndpoints(endpoints =>
{
endpoints.MapDefaultControllerRoute();
endpoints.MapFallbackToFile("index.html");
});
}
您可以使用 : 创建示例解决方案dotnet new blazorwasm --hosted
。它将使用 Blazor wasm 项目和主机创建解决方案。
推荐阅读
- node.js - 使用 createReadStream 和 csv-parser 的 Promise
- java - 为什么迭代条目集不起作用?
- r - R:仅导入和合并特定列
- sql - SQL 拆分 MM 和 YY 以及 Concat 与字符串
- python - 如何将多个值添加到字典键
- python - 试图弄清楚如何在文件管理器中打开文件夹
- reactjs - 防止 Formik 重新渲染特定字段
- reactjs - 当 html 和
block is contained within dangerouslySetInnerHTML?
- facebook - expo-facebook 上的 Facebook 权限不起作用
- node.js - 如何使用他的 ID Node js 向用户发送 DM 消息