使用项目Tye在...上托管Blazor WASM和ASP.NET Web API

使用 Project Tye 托管 Blazor WASM 和 ASP.NET Web API

在现代应用程序开发中，客户端和服务器通常被分为两个独立的部分。客户端负责呈现用户界面（UI），并通过 API 与服务器进行通信。然而，当客户端和服务器托管在不同的源（origin = scheme + host + port）时，这种通信可能会变得复杂。

在网络环境中，不同来源之间的通信会受到限制。默认情况下，浏览器不允许客户端向其他源发送 AJAX 请求，除非服务器通过 跨源资源共享（CORS） 标头明确允许跨源请求。

解决跨源通信问题

为了解决 CORS 的挑战，可以通过以下两种方式实现：

1. 将客户端和服务器托管在同一源上：如果技术栈允许，可以将客户端和服务器合并到一个项目中，从而避免跨源问题。
2. 使用反向代理：通过反向代理将客户端和服务器的源合并到代理的统一源下。

下图展示了通过反向代理处理 HTTP 请求的工作原理：

在这种架构中，所有以 /api/ 开头的请求会被转发到 API 服务器，而其他请求则会被转发到客户端的 Web 服务器。

使用 Project Tye 的优势

在本教程中，我们将学习如何使用 Project Tye 来托管 Blazor WebAssembly（WASM）客户端和 ASP.NET Web API，而无需配置 CORS。Microsoft 的实验性开发工具 Project Tye 提供了一种便捷的方式，通过单个命令启动客户端、服务器和代理服务。

通过 Tye 的入口（Ingress）功能，可以将客户端和服务器托管在同一个源上。这种方式类似于反向代理，但在 Tye 的文档和配置中被称为 Ingress。

环境准备

在开始之前，请确保已安装以下工具：

• .NET SDK
• Project Tye（可通过 .NET CLI 安装）

创建 Blazor WASM 客户端

首先，创建一个用于存放所有项目的文件夹：

mkdir TyeClientServerSingleOrigin
cd TyeClientServerSingleOrigin

接下来，使用 .NET CLI 创建一个 Blazor WebAssembly 客户端项目：

dotnet new blazorwasm -n Client -o Client

此命令将在 Client 文件夹中创建一个名为 Client 的项目，并将其作为默认命名空间。

将客户端项目添加到解决方案文件中：

dotnet sln add Client/Client.csproj

在 Client/Pages/FetchData.razor 文件中，默认情况下，客户端会从静态 JSON 文件中获取天气数据。将其更新为从 API 端点 /api/WeatherForecast 获取数据：

protected override async Task OnInitializedAsync()
{
    forecasts = await Http.GetFromJsonAsync("api/WeatherForecast");
}

创建 ASP.NET Core Web API 服务器

使用以下命令创建一个 ASP.NET Core Web API 项目：

dotnet new webapi -n Server -o Server

将服务器项目添加到解决方案文件中：

dotnet sln add Server/Server.csproj

默认情况下，客户端和服务器会使用相同的端口。为避免端口冲突，可以修改 Server/Properties/launchSettings.json 文件中的端口配置：

"applicationUrl": "https://localhost:5003;http://localhost:5002"

或者，运行以下 PowerShell 命令自动完成修改：

$launchSettingsContents = Get-Content -path ./Server/Properties/launchSettings.json -Raw
$launchSettingsContents = $launchSettingsContents -replace 'https://localhost:5001;http://localhost:5000', 'https://localhost:5003;http://localhost:5002'
Set-Content -Value $launchSettingsContents -Path ./Server/Properties/launchSettings.json

配置 Tye

安装 Tye 作为 .NET 全局工具：

dotnet tool install -g Microsoft.Tye --version "0.11.0-alpha.22111.1"

初始化 Tye 配置：

tye init

这将生成一个 tye.yaml 配置文件。更新文件内容如下：

name: tyeclientserversingleorigin
services:
- name: client
  project: Client/Client.csproj
  bindings:
  - port: 5001
    protocol: https
- name: server
  project: Server/Server.csproj
  bindings:
  - port: 5003
    protocol: https
ingress:
  - name: ingress
    bindings:
      - port: 8080
        protocol: https
    rules:
      - path: /api
        service: server
      - path: /swagger
        preservePath: true
        service: server
      - service: client

在此配置中：

• 客户端运行在 https://localhost:5001
• 服务器运行在 https://localhost:5003
• 入口（Ingress）运行在 https://localhost:8080

启动服务

运行以下命令启动所有服务和入口：

tye run

打开浏览器访问 https://localhost:8080，可以看到 Blazor 的用户界面。同时，访问 https://localhost:8080/swagger 可以查看 API 的 Swagger 文档。

此外，Tye 提供了一个仪表板，默认运行在 http://localhost:8000，可以查看服务的状态和日志。

总结

通过使用 Microsoft 的实验性工具 Project Tye，可以轻松地将 Blazor WASM 客户端和 ASP.NET Web API 托管在同一个源上，避免了 CORS 的复杂配置。Tye 的入口功能不仅简化了开发流程，还提供了强大的服务管理和日志监控能力，是现代微服务开发的有力工具。

原文链接: https://swimburger.net/blog/dotnet/use-project-tye-to-host-blazor-wasm-and-aspdotnet-web-api-on-a-single-origin