blazor webassembly前后台分离

原创

贝贝的无情剑客 2023-05-08 14:08:59 博主文章分类：架构设计与优化 ©著作权

文章标签 wasm java 开发语言前后台跨域 文章分类 MySQL 数据库

©著作权归作者所有：来自51CTO博客作者贝贝的无情剑客的原创作品，请联系作者获取转载授权，否则将追究法律责任

微服务

随着微服务的兴起，前后台分离现在已经是非常主流的技术了。在微服务-node.js中对前后台分离有基本的介绍，文章基于的是node.js做中转服务实现前后台分离。

跨域

前后台分离的一个核心问题就是跨域。跨域是违背同源策略的。同源指的是域名，协议，端口号都相同。（这个面试基本都会考的）

跨域的常用解决方案:

jsonp
CORS
代理服务器
Nginx反向代理

blazor webassembly

微软的blazor有统一天下的感觉。一套html和css代码，在加上一些c#代码就可以在多个地方运行。maui blazor的出现，对于andoid平台，windows平台，苹果平台只需要一套代码，就可以在任意设备运行。

Blazor 技术又分两种：

Blazor WebAssembly
Blazor Server

Blazor WebAssembly 是真正的SPA，页面的渲染在前端实现，可以实现真正的前后端分离设计。而Blazor Server可以认为是前者的服务端渲染版本，它使用SignalR实现了客户端的实时通讯，它的计算跟渲染都在服务端处理，对服务要求还是蛮高的。

前台nginx部署

前台代码通常部署在nginx下面，nginx作为最经典的反向代理服务器，具有很高的性能，这是因为它使用了多路复用技术，这个技术redis也用了，所以redis的性能会很高。

以下是具体的部署步骤(https配置不影响)：

dotnet publish -c Release
将wwwroot文件夹下面的东西copy到nginx的html页面中

代码修改：
在Program.cs中添加下面的代码：

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("http://localhost:5215") });

如果使用signalr的话需要：

_hubConnection = new HubConnectionBuilder()
                .WithUrl("http://localhost:5215/chathub")
                .Build();

后台

后台的话需要添加如下的代码：

builder.Services.AddCors(policy =>
{
    policy.AddPolicy("CorsPolicy", opt => opt
        .AllowAnyOrigin()
        .AllowAnyHeader()
        .AllowAnyMethod());
});
app.UseCors("CorsPolicy");

也可以限制具体的来源：

app.UseCors(policy => 
    policy.WithOrigins("http://localhost:5000", "https://localhost:5001")
    .AllowAnyMethod()
    .WithHeaders(HeaderNames.ContentType));

启动该应用。前后台就可以交互了。