p2p网站如何建设,织梦做的相亲网站,网站开发资费,u钙网logo设计官网欢迎大家阅读《朝夕Net社区技术专刊》我们致力于.NetCore的推广和落地#xff0c;为更好的帮助大家学习#xff0c;方便分享干货#xff0c;特创此刊#xff01;很高兴你能成为忠实读者#xff0c;文末福利不要错过哦#xff01;01PARTCoreWebApi的调用1.在Core MVC下建立… 欢迎大家阅读《朝夕Net社区技术专刊》我们致力于.NetCore的推广和落地为更好的帮助大家学习方便分享干货特创此刊很高兴你能成为忠实读者文末福利不要错过哦01PARTCoreWebApi的调用1.在Core MVC下建立WebApi—CrossDomainController控制器下的GetCrossDomainData api,如图1所示启动后通过浏览器调用正常如图2图1图22.那么试试Ajax调用试试呢如图3如果请求到就把结果放到div 中去那运行的时候不仅没有获取到数据而且还报错了如图4.图3图4那么这里的问题就是浏览器的同源策略引发的跨域问题下面将把这个问题的根本缘由给大家做一下说明.02PART浏览器同源策略什么是同源策略同源策略Sameoriginpolicy是一种约定它是浏览器最核心也最基本的安全功能请明确他是浏览器的安全约定。所谓的同源指的是协议域名端口相同。浏览器处于安全方面的考虑只允许本域名下的接口交互不同源的客户端脚本在没有明确授权的情况下不能读写对方的资源。设想这样一种情况A网站是一家银行用户登录以后又去浏览其他的网站如果其他网站可以读取A网站的Cookie,会发生什么很显然如果Cookie包含隐私比如存款总额这些信息就会泄漏。更可怕的是Cookie往往用来保存用于的登录状态如果用户没有退出登录其他网站就可以冒充用户为所欲为因为浏览器同时还规定提交表单不受同源策略的限制。由此可见同源策略是必须的。如果非同源那么在请求数据时浏览器会在控制台中报一个异常提示拒绝访问如图5。图5那么上面我们在调用的时候就是因为这个问题、Ajax的脚本和Api非同源Ajax请求Api的时候违背了浏览器的这个约定所以不能用其实Ajax在请求的时候是能够请求到Api的Api也返回了数据却因为浏览的同源要求而报错了下面给大家证明一下运行ApiApi打断点测试起来。。。如图6 、图7所示图6 断点能进来图7 但是就是报错浏览器限制了不能用以上描述的就是浏览器的同源策略 在非同源的情况下使用脚本调用Api会报错的这就是所谓的跨域问题。03PART如何解决跨域问题首先来分析一下出这个问题的原因是因为浏览器的约定而出现的那么如果我不使用非同源的脚本来调用呢是可以的定义一个Api 模拟Http请求去请求这个非同源的Api第一步定义定义Api 模拟http请求我这里是另外又建立了一个项目模拟http请求调用这个Api,让这个后台的Api再去调用非同源的Api-- GetCrossDomainData第二步运行起来包括运行GetCrossDomainDataApi所在的项目命令启动dotnet Zhaoxi.Core.WebApi.dll --urlshttp://*:8004 -- ip127.0.0.1 --port 8004监控的端口号为8004 然后启动调用GetCrossDomainDataApi的项目试试看如图8 图9图8命令启动了监控的是8004端口图9调用TestApi 方法让其执行InvokeApi方法去调用GetCrossDomainDataApi执行结果如图10图10 结果拿到了避开了跨域问题那就是解决跨域问题的第一种策略通过后台模拟Http请求去调用Api,可以避开跨域问题因为跨域是因为浏览器的同源引发的、不使用非同源的脚本去调用时Ok的;是不是很棒 这是第一种策略我们再往下分析看看刚刚在调用的时候报的错是什么Access to XMLHttpRequest at http://localhost:64304/api/CrossDomain/GetCrossDomainData from origin null has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.其实这个提示也很明确哦提示请求上下文不存在“Access-Control-Allow-origin” 头信息那是不是加上这个头信息就Ok了呢来试试看请看下图11仅仅只是加了一段代码。图11再来试试。。。来运行起来还是命令启动dotnet Zhaoxi.Core.WebApi.dll --urlshttp://*:8004 -- ip127.0.0.1 --port 8004 如图12图12Ajax调用如图13 图14图13图14这其实也是解决跨域的常用方法就是在浏览器直接标记告诉调用者Ok我这个Api是允许你跨域访问的仅此而已是不是很简单不过如果用这种方法来支持跨域难道在每个方法中都标记HttpContext.Response.Headers.Add(Access-Control-Allow-Origin, *);这句话吗这很显然很不爽还记不记得前面的文章中写了ActionFilter的使用在这里是不是很适合OK 马上给你实现一个定义个Filter标记在方法上如果需要所有Api 都跨域的话全局注册即可请看下图15 图16图15图16测试结果如下没毛病完美解决问题如图17图17以上也是解决跨域问题的常用策略是通过在服务器指定当前Api允许跨域访问的方式下面我将继续给大家分享一种解决跨域问题的方式其实在AspNetCore 中已经有支持跨域的Api听我慢慢道来第一步Nuget引入程序包Microsoft.AspNetCore.Cors.dll第二步注册跨域服务如图18 图18 第三步use 跨域中间件如图19图19 测试结果如下图20图20这里一共介绍了三种支持跨域的方式1. 通过后台模拟Http请求跨域2. 服务器标记头信息 context.HttpContext.Response.Headers.Add(Access-Control-Allow-Origin, *);3. 通过定义ActionFilter支持跨域其实和第二种原理一样4. 通过AspNetCore封装好的Cors来支持跨域下期预告【朝夕Net社区技术专刊】论ORM框架—EntityFrameworkCore
