栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > .Net

.Net 5 SignalR 跨域问题

.Net 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

.Net 5 SignalR 跨域问题

前言

大概两年前公司有个项目需要用到服务端推送功能,由于用到了移动端,当时SignalR在移动端没有相应的SDK,于是乎放弃了这个方案,改用MQTT。这两年随着.net core的流行,SignalR也一直没有被微软放弃,并且做了很多的工作,于是动手写了个小Demo。在测试过程中由于前后台分离,涉及到了跨域问题,经过详细的搜查,发现网上很多人写的博客都不喜欢标注运行环境,这样就导致浪费了太多的时间。

环境

运行环境:.Net 5(自带SignalR功能)
开发环境:VS2019 16.8.2

客户端现象


根据描述应该就是跨域问题,基于浏览器同源策略(这是一种浏览器的安全保护措施),在浏览器,当发送javascript的脚本请求的时候,浏览器会检测这个javascript脚本是否是来自同一个来源,如果不是,浏览器会认为脚本是不安全的,不敢用。
同源策略:要求协议、域名、端口号、都要相同

客户端解决

也就是在html请求页面加上相应的判断来解决跨域问题,这个可以参考jsonp 方法,比较老的一种通用方法,这里不详述了。

服务端解决

也就是后端跨域的设置,个人觉得这是一种比较优雅的解决方法,通过在服务端的接口调用处加上相应的判断。

.Net Framework

通过截取前端发来的请求,加上允许跨域访问

Response.AddHeader("Access-Control-Allow-Origin", "*");
.Net core 3.1及之前
services.AddCors(options =>
            {
                options.AddPolicy("any", builder =>
                {
                    builder.AllowAnyOrigin()
                           .AllowAnyMethod()
                           .AllowAnyHeader()
                           .AllowCredentials()
                });
            });

允许任何跨域的请求,也可以单独对某些ip进行设置

services.AddCors(options =>
            {
                options.AddPolicy("origin", builder =>
                {
                    builder.WithOrigins("http://localhost:8080",
                                        "http://192.168.1.222:8080/").AllowAnyMethod()
                                                                     .AllowAnyHeader()
                                                                     .AllowCredentials();

                    //builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials();
                });
            });

最后需要在Configure里加上:app.UseCors(“any”);

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            //app.UseHttpsRedirection();

            app.UseRouting();

            app.UseCors("any");

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapHub("/chathub");
            });
        }
.Net 5

在.net 5之后会发现按上面的设置直接报错了

所以这里要这样设置:

services.AddCors(options =>
            {
                options.AddPolicy("any", builder =>
                {
                    builder.SetIsOriginAllowed(_=>true).AllowAnyMethod().AllowAnyHeader().AllowCredentials();
                });
            });

具体的原因可以参考微软官方的文档:
链接: https://docs.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-5.0.

同样最后也需要加上app.UseCors(“any”);

结语

再次请求各位写博客的大佬请一定注明开发环境及程序运行版本,不然你还不如不写。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/910493.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号