提到 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. 第14.13节 BeautifulSoup的其他功能导览

    前面<第14.9节 Python中使用urllib.request+BeautifulSoup获取url访问的基本信息 >.<第14.10节 Python中使用BeautifulSo ...

  2. PyQt（Python+Qt）学习随笔：Model/View架构概述

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.引言 模型-视图-控制器(Model-View-Controller,简称MVC)是一种源于Sm ...

  3. IntelliJ IDEA 学习笔记

    之前一直用Eclipse,最近尝试使用IDEA,相较于 Eclipse 而言,IDEA强大的整合能力,比如: Git. Maven. Spring 等:提示功能的快速. 便捷:提示功能的范围广:好用的 ...

  4. 【Alpha冲刺阶段】Scrum Meeting Daily1

    1.会议简述 会议开展时间 2020/5/22 8:30-9:00 PM 会议基本内容摘要 讨论了基础的分工,以及明确了各自模块需要完成的任务 参与讨论人员 全体参与 特别说明 会议需要每天都开展!! ...

  5. 移动端web网页meta设置

    <meta charset='utf-8'><!-- 声明文档使用的字符编码 --> <meta http-equiv="X-UA-Compatible&quo ...

  6. 初中的一些OI琐屑 & APIO2020 & NOI2020

    这篇文章会发布在我的博客上 https://www.cnblogs.com/dmoransky/(一个小习惯,把信息学竞赛的学习历程记录在个人博客中). 借这篇随笔回顾并简短总结一下我的初中OI(信息 ...

  7. CF484B Maximum Value

    这个东西他一开始也是草稿 题解 我们考虑在值域上做,设值域为 \(m\) . 我们可以考虑数论分块,对于一对 \(a_i\) 和 \(a_j\) ,$\left \lfloor \frac{a_i}{ ...

  8. 自己编写k8s

    ## 基于Docker和Kubernetes的企业级DevOps实践训练营 ### 课程准备 1. 离线镜像包 百度:https://pan.baidu.com/s/1N1AYGCYftYGn6L0Q ...

  9. Css：常用的去除默认样式

    *{   padding: 0;   margin: 0; } ul,ol{   list-style: none; } a,a:hover,a:link,a:visited,a:active{    ...

  10. SpringBoot快速入门（实战篇一）

    SpringBoot快速入门(一) 一SpringBoot简介 1.spring开发经历的阶段 Spring 诞生时是 Java 企业版(Java Enterprise Edition,JEE,也称 ...