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

最新推荐文章于 2025-05-31 16:24:35 发布

原创最新推荐文章于 2025-05-31 16:24:35 发布 · 787 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #后端

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

通过以上设置就能完美解决跨域问题