提到 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="/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 的目录下。

【ASP.NET Core】Blazor 服务器端的 Base Path的更多相关文章

  1. 学习ASP.NET Core Blazor编程系列九——服务器端校验

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  2. 学习ASP.NET Core Blazor编程系列十——路由（中）

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  3. ASP.NET Core Blazor 初探之 Blazor Server

    上周初步对Blazor WebAssembly进行了初步的探索(ASP.NET Core Blazor 初探之 Blazor WebAssembly).这次来看看Blazor Server该怎么玩. ...

  4. ASP.NET Core Blazor Webassembly 之 路由

    web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...

  5. 022年9月12日 学习ASP.NET Core Blazor编程系列三——实体

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  6. 学习ASP.NET Core Blazor编程系列十——路由（上）

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  7. ASP.NET Core Blazor 用Inspinia静态页模板搭建简易后台（实现菜单选中）

    Blazor 是一个用于使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应用逻辑 ...

  8. [Asp.Net Core] Blazor Server Side 扩展用途 - 配合CEF来制作带浏览器核心的客户端软件 (二) 可运行版本

    前言 大概3个星期之前立项, 要做一个 CEF+Blazor+WinForms 三合一到同一个进程的客户端模板. 这个东西在五一的时候做出了原型, 然后慢慢修正, 在5天之前就上传到github了. ...

  9. ASP.NET Core Blazor Webassembly 之 组件

    关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...

随机推荐

  1. 第10.5节 使用__all__定义Python模块导入白名单

    一. 引言 <第10.4节 Python模块的弱封装机制>介绍了Python模块的的弱封装机制,除了使用弱封装机制来从一定程度上防止导入特定成员外,Python模块中还提供可另外一种类似白 ...

  2. PyQt(Python+Qt)学习随笔：Qt Designer中部件的是否接受鼠标拖放事件的acceptDrops属性及含义

    acceptDrops属性表示当前部件是否接受鼠标拖放事件,鼠标拖放应该是与鼠标拖拽结合在一起的,在Qt Designer中可以通过属性acceptDrops设置部件是否接受鼠标拖放事件.如果部件接受 ...

  3. PyQt(Python+Qt)学习随笔：Qt Designer中主窗口对象的dockOptions属性

    dockOptions属性代表主窗口对浮动部件停靠的反应,其类型为枚举类型QMainWindow.DockOptions.相关取值及含义如下: 这些枚举值可以组合使用,仅控制如何在QMainWindo ...

  4. 基于.NET的程序读取Excel文件的解决方案

    目录 0. 前言 1. 使用NPOI库读取Excel文件 2. 使用OleDbConnection 3. 相关参考 shanzm-2020年12月8日 23:48:11 0. 前言 以前基于 .NET ...

  5. 【题解】AcWing 193. 算乘方的牛

    原题链接 题目描述 约翰的奶牛希望能够非常快速地计算一个数字的整数幂P(1 <= P <= 20,000)是多少,这需要你的帮助. 在它们计算得到最终结果的过程中只能保留两个工作变量用于中 ...

  6. sort by背后使用了什么排序算法

    用到了快速排序,但不仅仅只用了快速排序,还结合了插入排序和堆排序 搬运自https://blog.csdn.net/qq_35440678/article/details/80147601

  7. JavaSE18-字节缓冲流&字符流

    1.字节缓冲流 1.1 字节缓冲流构造方法 字节缓冲流介绍 BufferOutputStream:该类实现缓冲输出流. 通过设置这样的输出流,应用程序可以向底层输出流写 入字节,而不必为写入的每个字节 ...

  8. elasticsearch6.5.x-centos6

    elasticsearch6.5.x-centos6 elasticsearch 和 关系型数据库中的类比 es ====== RDBMS index ----- database type ---- ...

  9. (byte & 0xff)操作

    先看一段代码: @Test public void test(){ byte a = -5; byte b = 12; System.out.println(a); System.out.printl ...

  10. css 10-CSS3选择器详解

    10-CSS3选择器详解 #CSS3介绍 CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. #CSS3的现状 浏览器支持程度不够好,有 ...