.Net 站点跨域问题及解决方法
一、什么是站点跨域
了解跨域之前, 先了解下什么同源策略?
百度百科：
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
同源:同一个协议, 同一个主机, 同一个端口 即同一个站点, 比如说IIS服务器, 一个站点只能绑定一个端口
那为什么需要同源策略的支持呢?
因为假设你已经登陆一个站点, 服务器已经将一些敏感信息返回到了客户端, 如果此时你的站点代码中有一段访问其他站点的代码, 这段代码又是获取用户的铭感信息, 又比如说用户在访问银行网站，并且没有登出。然后他又去了任意的其他网站，
刚好这个网站有恶意的js代码，在后台请求银行网站的信息。因为用户目前仍然是银行站点的登陆状态，那么恶意代码就可以在银行站点做任意事情。例如，获取你的最近交易记录，创建一个新的交易等等。那是相当不安全的.
所以同源策略是相当重要的.即如果访问了一个站点, 那么用户在访问这个站点的所有内容必须是这个站点的内容, 不允许访问其他站点的内容.
二、"同源政策"限制的功能
随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。
（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。
虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。
三、为什么要规避同源策略
1、Cookie问题
假设我们有一个站点,由于业务的扩展,一个站点无法承受这么大的业务量,常规的做法是将业务拆分,拆分成不同的站点.但是理论上拆分出来的站点还是归属于原来的站点,因为逻辑上这些站点属于一个应用程序,所以我们需要使用多级域名的技术,给主站点分配一个主域名,其他的站点分配该主域名的子域名,集体请参考IIS 站点部署多级域名.
但是由于"同源策略"的影响,其中的一个业务站点无法共享其它站点的Cookie,因为它们只是一级域名相同,二级域名并不相同,但是理论上它们时同一个应用程序,所以Cookie必须共享.
问题重现,在主站点的MVC控制器的Index方法写入一个Cookie信息,代码如下:
public ActionResult Index() { var cookie = new HttpCookie("userInfo", "xiaochao"); cookie.Expires = DateTime.Now.AddDays(1);//设置cookie一天后过期 Response.SetCookie(cookie); return View(); }
在主站点的Index页面下读取cookie,代码如下:
<script> $(function () { //输出在主站点设置的cookie $(function () { //输出cookie var username = document.cookie.split(";")[0].split("=")[1]; if (username) { alert(username); } else { alert("cookie没有写入"); } }); });
注意在打开浏览器前,请先清空浏览器缓存,主站点浏览器输出:
ok,Cookie正常输出,接着打开业务站点1,js代码和上面的一样
ok,问题很明显,主站点并没有将cookie共享到业务站点,所以这个问题必须解决.
解决方案如下:
(1)、服务器端设置Cookie的Domain属性
通过主站点服务器端(不一定在主站点,也可以是业务站点,亲测有效,这里不做演示)设置Cookie的Domain属性为一级域名,这样所有的在一级域名下的二级域名站点都可以共享Cookie,代码如下:
public ActionResult Index() { var cookie = new HttpCookie("userInfo", "xiaochao"); cookie.Expires = DateTime.Now.AddDays(1);//设置cookie一天后过期 cookie.Domain = "a.com";//设置Domain属性,这样这个域名下的所有的子域名,所有站点都共享Cookie Response.SetCookie(cookie); return View(); }
主站点输出:
业务站点1输出:
ok,说明在Cookie设置生效了,所有的站点共享了Cookie.
(2)、客户端Js脚本设置
3、.Net 站点下跨域问题的重现
现在有两个站点,一个MVC站点,一个WebApi站点
此时有个业务,MVC站点需要访问Api站点下面的一个Json方法,拿到对应的业务数据
Api站点的方法如下:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace SiteApi.Controllers { public class HomeController : Controller { public ActionResult Index() { ViewBag.Title = "Home Page"; return View(); } /// <summary> /// 给MVC站点调用的方法 /// </summary> /// <returns></returns> [HttpPost] public ActionResult GetData() { return Json("666"); } } }
MVC页面的调用代码如下:
<script src="~/Scripts/jquery-1.10.2.js"></script> <script> $(function () { $.post("http://localhost:50187/Home/GetData", function (data) { alert(data); }); }); </script>
运行站点效果如下:
数据没有出来,打开控制台发现了这个Error。百度提示,浏览器出现跨域行为,需要添加Asscss-COntrol-Allow-Origin头.
4、为什么要规避跨域
先说说为什么要规避跨域?
上面的例子可以说明,且假设有一个应用集群,我们建设了一个用户中心,该用户中心提供一些用户验证的功能,如登陆校验、权限等功能.那必须的,这个用户中心是以站点的形式存在,而应用集群中所有的应用必须能访问该用户中心站点,来校验用户的可用性,
但是用户中心站点对于应用集群中所有的应用来说都属于外部应用,所以违反了同源策略,但是这个功能必须要实现.所以这种情况下,必须采用技术手段来规避同源策略.
5、解决方案
(1)、跨域资源共享 CORS 技术
Ajax请求受限于同源策略,而这种技术能解决这种限制.但是需要服务器和浏览器的协作,IE浏览器不能低于IE10.
(1)、Jsonp技术
下面用Jsonp技术来解决这个问题.在了解这个技术之前,你需要知道虽然同源策略不允许跨域Ajax请求,代码支持跨域的文件访问,这些文件包括图片、Js文件等.这里我们就可以用特定的Ajax请求去访问一个Js文件(也可以是html文件),将这个文件下载下来,那么浏览器会执行这个文件,而这个文件就包含别的站点的访问数据.具体实现方法如下:
