前端VUE2.0/3.0
后端NET8.0/NET6.0
框架Furion
前端安装SignalR通信库，下面任意一条安装指令都可以，根据项目自行选择
npm install @microsoft/signalr
yarn add @microsoft/signalr
前端使用
<script>
import { HubConnectionBuilder } from '@microsoft/signalr';
const connection = new HubConnectionBuilder().withUrl('http://localhost:5000/chatHub').build();
connection.start()//启动连接
connection.on('需要订阅的主题', 消息处理方法（有1个参数）)//订阅主题
</script>
后端使用
在Startup文件中注册服务
public void ConfigureServices(IServiceCollection services){services.AddSignalR();//添加即时通信}
在Startup文件中设置服务
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{if (env.IsDevelopment()){app.UseDeveloperExceptionPage();}app.UseHttpsRedirection();app.UseRouting();app.UseCors("localhost:5000");app.UseCorsAccessor();app.UseAuthentication();app.UseAuthorization();app.UseInject(string.Empty);app.UseEndpoints(endpoints =>{//注册集线器endpoints.MapHub<ChatHub>("/chatHub").RequireCors(t=>t.SetIsOriginAllowed((host)=>true).AllowAnyMethod().AllowAnyHeader().AllowCredentials());endpoints.MapControllers();});
}
创建一个你自己的Hub类，我这里叫ChatHub
public class ChatHub : Hub{}
在其他服务中使用SignalR发布主题
public class OutService:IDynamicApiController,ITransient{private readonly IHubContext<ChatHub> _hubContext;public OutService(IHubContext<ChatHub> hubContext){_hubContext = hubContext;}/// <summary>/// 测试发布主题/// </summary>/// <param name="user">主题</param>/// <param name="message">消息</param>/// <returns></returns>[HttpPost("send/log")]public async Task SendLog(string user,string message){await _hubContext.Clients.All.SendAsync(user, message);}}
问题：前端通过SignalR连接后端时CORS报错（跨域）
解决方案
1.注册时配置跨域（注意顺序）
app.UseRouting();
app.UseCors("localhost:5000");
2.设置MapHub跨域
app.UseEndpoints(endpoints =>
{//注册集线器endpoints.MapHub<ChatHub>("/chatHub").RequireCors(t=>t.SetIsOriginAllowed((host)=>true).AllowAnyMethod().AllowAnyHeader().AllowCredentials());endpoints.MapControllers();
});
通过以上设置就能完美解决跨域问题
