同源策略_如何支持跨域

欢迎大家阅读《朝夕Net社区技术专刊》

我们致力于.NetCore的推广和落地，为更好的帮助大家学习，方便分享干货，特创此刊！很高兴你能成为忠实读者，文末福利不要错过哦！

PART

CoreWebApi的调用

1.在Core MVC下建立WebApi—CrossDomainController控制器下的GetCrossDomainData api,如图1所示；启动后通过浏览器调用正常如图2；

图1

图2

2.那么试试Ajax调用试试呢？如图3，如果请求到，就把结果放到div 中去；那运行的时候，不仅没有获取到数据，而且还报错了如图4.

图3

图4

那么这里的问题就是浏览器的同源策略，引发的跨域问题；下面将把这个问题的根本缘由给大家做一下说明.

PART

浏览器同源策略

什么是同源策略？同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，请明确：他是浏览器的安全约定。所谓的同源，指的是协议，域名，端口相同。浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。

设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他的网站，如果其他网站可以读取A网站的Cookie,会发生什么？很显然，如果Cookie包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是Cookie往往用来保存用于的登录状态，如果用户没有退出登录，其他网站就可以冒充用户为所欲为，因为浏览器同时还规定，提交表单不受同源策略的限制。由此可见，同源策略是必须的。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问；如图5。

图5

那么上面我们在调用的时候就是因为这个问题、Ajax的脚本，和Api非同源；Ajax请求Api的时候，违背了浏览器的这个约定，所以不能用；其实Ajax在请求的时候，是能够请求到Api的，Api也返回了数据；却因为浏览的同源要求，而报错了；下面给大家证明一下：运行Api：Api打断点：测试起来。。。如图6 、图7所示；

图6

断点能进来

图7

但是就是报错，浏览器限制了；不能用；

以上描述的就是浏览器的同源策略在非同源的情况下使用脚本调用Api会报错的；这就是所谓的跨域问题。

PART

如何解决跨域问题？

首先来分析一下出这个问题的原因；是因为浏览器的约定而出现的；那么如果我不使用非同源的脚本来调用呢？是可以的；定义一个Api 模拟Http请求去请求这个非同源的Api；

第一步：定义定义Api 模拟http请求：

我这里是另外又建立了一个项目：模拟http请求；调用这个Api,让这个后台的Api再去调用非同源的Api-- GetCrossDomainData

第二步：运行起来：

包括运行GetCrossDomainDataApi所在的项目；命令启动：dotnet Zhaoxi.Core.WebApi.dll --urls="http://*:8004" -- ip="127.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；仅仅只是加了一段代码。