asp.net core+vue+signalr示例

最新推荐文章于 2025-10-08 17:58:59 发布

原创

最新推荐文章于 2025-10-08 17:58:59 发布 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net core #vue #signalr

asp.net core版本：5.0

Vue版本：2.5.2

本文是入门教程，主要讲解如何利用SignalR从客户端调用服务器的函数，以及从服务器调用客户端的函数。

首先看一下服务端代码：

添加SignalR服务：

public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();
            services.AddSignalR();        
            services.AddCors(opt =>
            {
                opt.AddPolicy("SignalRCorsPolicy", corsBuilder =>
                {   
                 corsBuilder.AllowAnyHeader().WithOrigins("http://localhost:8080").AllowCredentials();
                });
            });
        }

SignalR服务是asp.net core自带的，所以不需要从Nuget包管理器中添加。

因为客户端和服务器是跨域的，所以需要配置跨域。withOrigins的参数就是服务器允许访问的客户端地址，我这里的地址就是vue客户端的运行地址。如果我们不设置Origins(也就是任何客户端都可以访问该服务器)，把WithOrigins改成AllowAnyOrigin()，那服务器就会报这样的错：