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

Question

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

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

当您单击调试时，它可以完美运行。

现在我想更改它，以便从https://localhost:44331提供我所有的 Blazor WASM 页面，并从https://localhost:44331/api提供服务器应用程序的 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 ”的安全 URL 。

这打破了一切。

现在“ 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;
        }