web-dev-qa-db-ja.com

Blazor WebAssemblyソリューションで、サーバーAPIとは異なるポートでBlazor WASMクライアントアプリをホストする方法

Microsoftのデフォルトのソリューションテンプレートに基づいて、クライアントプロジェクト、サーバープロジェクト、共有プロジェクトを含むBlazor WebAssemblyソリューションがあります。 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 "のセキュアURLを割り当てます。

それはすべてを壊します。

ここで、「 https：// localhost：44331 / "は404 Not Foundエラーに移動し、「 https：// localhost：44331/api "はページに移動しますそれは言う：

読み込んでいます...
未処理のエラーが発生しました。リロード????

それは簡単すぎるでしょう！誰かが私が望む方法で環境を得る正しい方法を知っていますか？

asp.net-coreblazoriis-expressblazor-client-sideasp.net-core-staticfile
1
benjamin

OK！ようやく機能する方法を見つけました。複雑ではありませんが、答えが出るまでにdaysかかったので、他の人にも役立つと思うので、ここに投稿します。

コントローラ上：

[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);
        }
4
benjamin

Wasm/Hostedテンプレートから新しいアプリへの最小限の変更：

WeatherForecastController.cs

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

FetchData.razor

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