Question

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

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

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

现在，我想对其进行更改，以便从https://localhost:44331提供我所有的Blazor WASM页面，并从https://localhost:44331/api提供服务器应用程序的API Controller端点

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

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

一个明显的起点似乎是将服务器应用程序属性的“调试”部分中的“应用程序URL”设置更改为“ http://localhost:52708/api”。该项目将分配一个安全的URL“ https://localhost:44331/api”。我在客户端应用程序中保留了相同的设置，因此在客户端应用程序中，客户端应用程序属性的“调试”部分中的“应用程序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.FromResult(0);
        }

Answer 2

从Wasm /托管模板对新应用进行的最小更改：

WeatherForecastController.cs

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

FetchData.razor

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

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

2 个答案: