【ASP.NET Core】Blazor 服務器端的 Base Path-有解無憂

提到 Blazor，沒準就會有人問：選用 Server 端還是 WebAssembly（客戶端）？其實這個不用糾結，老周個人的原則是：Server 端優先，理由很單純：服務器端雖然消耗服務器上的資源，但加載速度快，而且不用下載組件（幾個腳本也不大），其實嘛，Web 應用都是消耗服務器資源的，不然要服務器干嗎呢，

那啥時候選用 Web Assembly 呢？應該在互動比較繁復時，比如，你開發了個游戲，叫《國民 996》，這樣的話選用客戶端是比較合適，

======================================================================

Du Du, Stop！題外話結束，今天要說的話題是服務器端的 Blazor應用方面的，各位估計都玩過 Blazor 了，在加載組件的 HTML 檔案中，通常會在 <head> 元素下指定一個應用程式的基礎路徑，也就是 Base Path，就像這樣：

<head>
    <base href="/" />
</head>

然后，<body>里面的腳本匯入就會相對于上面指定的路徑，

    <script src="_framework/blazor.server.js"></script>

在 99.996% 的場合中，你只需要為應用程式指定“/”作為基礎路徑就可以了，當瀏覽器發來請求時，服務器就會從根路徑開始匹配 URL 路由，然后定位到目標組件并加載，

但是，在 0.004% 的場合中，這個<base>元素可能要加上一個前綴，比如：/demo，那什么場合呢？Duang，來了：

1）ASP.NET Core（Blazor）應用程式系結本機地址運行，如著名的 localhost:5000；

2）使用其他服務器組件來反向代理，世界聞名的有愛愛S、阿Pache，ng拽nx之類，

3）IIS、nginx等上面配置了路徑前綴，

以 nginx 為例，假設有這樣的配置：

    server {
        listen       80;
        ……

        location / {
            root   html;
            index  index.html index.htm;
        }

        location /blazapp/ {
             proxy_pass              http://localhost:5000;
             proxy_http_version      1.1;
             proxy_set_header        Upgrade $http_upgrade;
             proxy_set_header        Connection keep-alive;
             proxy_set_header        Host $host;
             proxy_cache_bypass      $http_upgrade;
             proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header        X-Forwarded-Proto $scheme;
             proxy_set_header        Connection "Upgrade";
        }

如果訪問根路徑 / ，那么指向 index.html 等檔案；若訪問 /blazapp 前綴打頭的路徑才指向我的 Blazor 應用， proxy_xxx 配置的轉發規則會把這個路徑前綴也轉發給 ASP.NET Core 應用行程，所以，這時候，咱們用來加載 blazor 組件的HTML檔案就要這樣寫 <base> 了，

<head>
    <base href=https://www.cnblogs.com/tcjiaan/archive/2021/01/05/"/blazapp" />
</head>

看，這個 Base Path 就是這么用的，

注意 blazor 組件的代碼是不需要改動的，比如這個叫 home 的組件，

@page "/home"

<h3>豆腐小鎮歡迎您</h3>

@page 指令后面的URL不需要添加前綴，

但，Startup 類里面的 Configure 方法里面的代碼就要做點手腳了，

1）呼叫 UseForwardedHeaders 方法，這個與 blazor 關系不大，使用反向代理的話都應該呼叫，以讓應用程式讀取轉發的頭；

2）呼叫 UsePathBase 方法，設定的路徑前綴要和前面 nginx 中配置的一致，這一句是重點，它的作用是把傳入應用程式的URL中的前綴去掉，

例子：

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseForwardedHeaders();
            app.UsePathBase("/blazapp");

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseStaticFiles(); //這句別忘了
            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/Host");
            });
        }

這時候，從瀏覽器中訪問 http://localhost/blazapp/home，組件就顯示出來了，

當從瀏覽器發出請求 localhost/blazapp/home 時，nginx 會把路徑 /blazapp/home 轉發給 ASP.NET Core 應用程式，

ASP.NET Core 應用程式收到訊息后，由于呼叫了 app.UsePathBase("/blazapp")，自動把 /blazapp 這一段砍掉了，于是，傳給 Routing 的 URL 又恢復到 /home，所以，我們寫的 blazor 組件是不用去改路徑規則的，

Web Assembly 應用也能使用這個 Base Path 設定，不過用處不是很大，除非你一個服務器應用承載多個 webasm 應用，同時下載多個 webasm 應用也用得不多，如果確實要這樣做，那么你的 Host 專案就要參考多個 webasm 專案，假設叫 app1、app2，這種方案你必須為每個 web asm 的專案檔案（.csproj）加上 StaticWebAssetBasePath 節點，

例如，app1 應用的專案檔案加上：

    <StaticWebAssetBasePath>/path01</StaticWebAssetBasePath>

app2 應用的專案檔案里加上：

    <StaticWebAssetBasePath>/path02</StaticWebAssetBasePath>

如果不這樣做，是無法編譯的，因為 Webassembly 應用默認的路徑前綴是“/”，如果你的 Host 程式參考了 N 個 Web Assembly 應用，那么就等于用一個“/”指向多個專案，這就沖突了，所以要在專案檔案中加上 StaticWebAssetBasePath 配置，以解決此問題，StaticWebAssetBasePath 指定的是邏輯路徑，并不要求真的存在這個目錄（為了解決沖突用），你的專案檔案可以放在名為 sb01、sb02 的目錄下，

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/245004.html

標籤：.NET技术

上一篇：.NET/C#程式開發中如何更優美地實作失敗任務重試的邏輯？

下一篇：求大佬教教foreach