【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="/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的更多相关文章
- 学习ASP.NET Core Blazor编程系列九——服务器端校验
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 学习ASP.NET Core Blazor编程系列十——路由（中）
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- ASP.NET Core Blazor 初探之 Blazor Server
上周初步对Blazor WebAssembly进行了初步的探索(ASP.NET Core Blazor 初探之 Blazor WebAssembly).这次来看看Blazor Server该怎么玩. ...
- ASP.NET Core Blazor Webassembly 之 路由
web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...
- 022年9月12日 学习ASP.NET Core Blazor编程系列三——实体
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 学习ASP.NET Core Blazor编程系列十——路由（上）
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- ASP.NET Core Blazor 用Inspinia静态页模板搭建简易后台（实现菜单选中）
Blazor 是一个用于使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应用逻辑 ...
- [Asp.Net Core] Blazor Server Side 扩展用途 - 配合CEF来制作带浏览器核心的客户端软件 (二) 可运行版本
前言 大概3个星期之前立项, 要做一个 CEF+Blazor+WinForms 三合一到同一个进程的客户端模板. 这个东西在五一的时候做出了原型, 然后慢慢修正, 在5天之前就上传到github了. ...
- ASP.NET Core Blazor Webassembly 之 组件
关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...
随机推荐
- 在Python中使用moviepy进行视频剪辑时输出文件报错 ‘NoneType‘ object has no attribute ‘stdout‘问题
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 movipy输出文件时报错 'NoneType' ...
- MDX非常规百分比算法-过滤数据后的百分比
网上有很多关于占比的帖子,基本上都是按照层次结构来做的,比如某个子项占总体的百分比(\all).某个子项占父项的百分比(\parent).某个子项占其祖先的百分比(\ancestor)....等等,如 ...
- Android的intent
title: Android基础01 date: 2020-02-15 17:17:04 tags: 1.Intent Intent可以让活动进行跳转.使用方式有两种,一种是显式,另一种是隐式. 1. ...
- 性能测试基础——（MEN）
关于内存在一块其实我并不是很想拿出来说,一般情况下内存这一块都是可优化的,可以通过硬件资源或者调整一些系统或者应用系统的参数配置来进行优化. 很多同僚问到了"内存泄漏"和" ...
- Scrum 冲刺第三天
一.每日站立式会议 1.会议内容 1)进行每日工作汇报 张博愉: 昨天已完成的工作:博客编写.spring boot学习 今日工作计划:将项目代码更新到最新版本 工作中遇到的困难:各成员的环境不一样, ...
- 题解 CF1446D2 【Frequency Problem (Hard Version)】
给出一个跑得快一点的做法,洛谷最优解 (时间是第二名的 \(\frac{1}{2}\)), CF 第一页 D1 首先找到整个序列的众数 \(G\), 很容易证明答案序列中的两个众数中其中一个是 \(G ...
- 深入理解Java虚拟机(一)——JVM内存模型
文章目录 程序计数器 定义 作用 特点 Java虚拟机栈 定义 特点 本地方法栈 定义 Java堆 定义 特点 方法区 定义 特点 运行常量池 直接内存 总结 Java虚拟机的内存空间分为五个部分: ...
- gunicorn简单配置
Gunicorn配置 # -*- coding: utf-8 -*- import os from multiprocessing import cpu_count bind = "127. ...
- STL——容器（List）List 的构造函数
list<T> lstT -- list 对象的默认构造 list 与 vector 一样,同样采用模板类实现,对象的默认构造形式:list<T> lstT 如: 1 #in ...
- 最新快手抖音短视频源码web+APP架设教程+完整数据
最新更新快手抖音短视频源码web+APP架设教程+完整数据完美运行 视频直播源码,好东西,反正有人要就是了. 下载地址:https://pan.baidu.com/wap/init?surl=POU5 ...