当前位置：首页 > news >正文

Asp.net Core SignalR 跨域设置（Furion）

news 2024/10/22 21:41:47

前端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();
});