在 Blazor WebAssembly 解决方案中，如何在与服务器 API 不同的端口上托管 Blazor WASM 客户端应用程序

Question

我有一个 Blazor WebAssembly 解决方案，其中包含一个客户端项目、服务器项目和共享项目，基于 Microsoft 的默认解决方案模板。我正在使用 Google Chrome 在 Visual Studio 2019 预览版中进行编辑和调试。

开箱即用，该解决方案有一个启动项目，即服务器应用程序。该服务器应用程序具有对客户端应用程序的项目引用。您可以通过在服务器项目属性中选中“启用 SSL”来将其设置为使用 HTTPS，我已经这样做了。

当您点击调试时，它会完美运行。

现在我想更改它，以便我的所有 Blazor WASM 页面都由 https://localhost:44331 提供服务，而服务器应用程序的 API 控制器端点则由 https://localhost:44331/api 提供服务

我想使用 URL 的这个额外的“/api”部分来保持对 API 的请求与仅在 Blazor 客户端应用程序中导航分开。因此，如果我请求“https://localhost:44331/api/something”，我知道我将在我的 Web API 中找到一个点，但如果我请求“https://localhost:44331/something”，我知道我将点击 Blazor 客户端应用程序中的特定页面。我认为它也将更接近生产中的正常设置。

我希望很清楚我想要做什么。

显而易见的起点似乎是将服务器应用程序属性的“调试”部分中的“应用程序 URL”设置更改为“http://localhost:52708/api”。该项目分配了“https://localhost:44331/api”的安全 URL。我在客户端应用程序中保留了相同的设置，因此在客户端应用程序中，客户端应用程序属性的“调试”部分中的“应用程序 URL”设置仍然是“http://localhost:52708”，项目分配了一个安全的“https://localhost:44331”的网址。

这会破坏一切。

现在“https://localhost:44331/”将我带到一个 404 Not Found 错误，而“https://localhost:44331/api”将我带到一个页面，上面写着：

加载中...
发生了未处理的错误。重新加载？？？？

那太容易了！请问有人知道获得我想要的环境的正确方法吗？

Answer 1

好的！我终于想出了一个可行的方法。这并不复杂，但我花了 几天 才得到答案，所以我将把它贴在这里，因为我认为它对其他人有用。

在您的控制器上：

[Route("api/[controller]")]
public class SampleController : ControllerBase
    {
    //Etc.
    }

在 Startup.cs...

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            //Etc.
            app.UseStaticFiles();
            app.UseRouting();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapControllers();
                endpoints.Map("api/{**slug}", HandleApiFallback);
                endpoints.MapFallbackToFile("{**slug}", "index.html");
            });
        }

        private Task HandleApiFallback(HttpContext context)
        {
            context.Response.StatusCode = StatusCodes.Status404NotFound;
            return Task. CompletedTask;
        }

Answer 2

Wasm/Hosted 模板对新应用的最小更改：

WeatherForecastController.cs

//[Route("[controller]")]
  [Route("api/[controller]")]

FetchData.razor

//forecasts = await Http.GetJsonAsync<WeatherForecast[]>("WeatherForecast");
  forecasts = await Http.GetJsonAsync<WeatherForecast[]>("api/WeatherForecast");