域，域名，同域，跨域及解决

转载文章：web服务(同域和跨域) 作者：淘码小工来源：简书

转载文章：关于跨域,以及跨域的几种方式作者：陈诗烁来源：博客园

域：Windows网络中独立运行的单位，域之间相互访问则需要建立信任关系；当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理，以及相互通信和数据传输。域既是 Windows 网络操作系统的逻辑组织单元，也是Internet的逻辑组织单元，在 Windows 网络操作系统中，域是安全边界。域管理员只能管理域的内部，除非其他的域显式地赋予他管理权限，他才能够访问或者管理其他的域，每个域都有自己的安全策略，以及它与其他域的安全信任关系。

域的原理

其实可以把域和工作组联系起来理解，在工作组上你一切的设置在本机上进行包括各种策略，用户登录也是登录在本机的，密码是放在本机的数据库来验证的。而如果你的计算机加入域的话，各种策略是域控制器统一设定，用户名和密码也是放到域控制器去验证，也就是说你的账号密码可以在同一域的任何一台计算机登录。

如果说工作组是“免费的旅店”那么域（Domain）就是“星级的宾馆”；工作组可以随便出出进进，而域则需要严格控制。“域”的真正含义指的是服务器控制网络上的计算机能否加入的计算机组合。一提到组合，势必需要严格的控制。所以实行严格的管理对网络安全是非常必要的。在对等网模式下，任何一台电脑只要接入网络，其他机器就都可以访问共享资源，如共享上网等。尽管对等网络上的共享文件可以加访问密码，但是非常容易被破解。在由Windows 9x构成的对等网中，数据的传输是非常不安全的。

不过在“域”模式下，至少有一台服务器负责每一台联入网络的电脑和用户的验证工作，相当于一个单位的门卫一样，称为“域控制器（Domain Controller，简写为DC）”。

域控制器中包含了由这个域的账户、密码、属于这个域的计算机等信息构成的数据库。当电脑联入网络时，域控制器首先要鉴别这台电脑是否是属于这个域的，用户使用的登录账号是否存在、密码是否正确。如果以上信息有一样不正确，那么域控制器就会拒绝这个用户从这台电脑登录。不能登录，用户就不能访问服务器上有权限保护的资源，他只能以对等网用户的方式访问Windows共享出来的资源，这样就在一定程度上保护了网络上的资源。

要把一台电脑加入域，仅仅使它和服务器在网上邻居中能够相互“看”到是远远不够的，必须要由网络管理员进行相应的设置，把这台电脑加入到域中。这样才能实现文件的共享，集中统一，便于管理。

域的作用

如果企业网络中计算机和用户数量较多时，要实现高效管理，就需要windows域。

域和组的区别

工作组是一群计算机的集合，它仅仅是一个逻辑的集合，各自计算机还是各自管理的，你要访问其中的计算机，还是要到被访问计算机上来实现用户验证的。而域不同，域是一个有安全边界的计算机集合，在同一个域中的计算机彼此之间已经建立了信任关系，在域内访问其他机器，不再需要被访问机器的许可了。

域名：是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）

域名系统：DNS因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP地址数串。系统中的每一层叫做一个域，每个域用一个点分开；DNS服务器：域名映射为IP地址；

域名一般不能超过5级，从左到右域的级别变高，高的级域包含低的级域。域名在整个Internet中是唯一的，当高级子域名相同时，低级子域名不允许重复。一台服务器只能有一个IP地址，但是却可以有多个域名。

域名级别划分：其它级别域名

除了顶级域名，还有二级域名（SLD，second-level domain），就是最靠近顶级域名左侧的字段。如：zh.wikipedia.org中，wikipedia就是二级域名(有资料认为, 在顶级域名后面, 还存在一级域名, 那么zh就是二级域名)。

再下来就是三级域名，即最靠近二级域名左侧的字段，从右向左便可依次有四级域名、五级域名等等。举个正在使用中的三级域名的实例，www.ncic.ac.cn，其中www前缀表明此域名对应着万维网服务，每一级域名由英文半角句号分区，“ncic”作为三级域名是“ac.cn”的子域名。

以下为转载内容：

1）什么是跨域及产生原因

跨域:浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

同域：简单的解释就是域名相同,端口相同,协议相同

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

特别注意两点：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，

第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains域名, protocols协议 and ports 端口must match”。

2）web服务请求数据更新界面的步骤

1. 服务器把数据汇集起来，通过一个web服务对外发布。

2. 浏览器加载web应用，包括HTML标记、CSS和JavaScript.

3. 应用发出一个web请求，从服务器获取汇集的信息。

4. 应用受到服务器发回的数据。

5. 浏览器根据DOM更新页面，用户会看到相应结果。

6. 实时刷新的话，使用定时器接着请求数据，返回第三步执行。

如何向Web服务做出请求？

注: 使用XMLHttpRequest获取数据的模式也成为Ajax

1.首先从一个URL开始，告诉浏览器到哪里找我们要的数据。

var url = "http://someserver.com/data.json"
//json是一种交换数据的格式

2. 创建一个请求对象

var request = new XMLHttpRequest();
//使用XMLHttpRequest构造函数创建一个新的请求对象。

3.告诉请求对象我们希望它获取的那个URL,以及要使用哪种请求。open方法只是用一个URL建立一个请求，并告诉这个请求对象要使用哪种请求，以便XMLHttpRequest验证连接。

request.open("GET", url);
//HTTP GET是获取HTTP数据的标准方法。

4. 最后要求XMLHttpRequest对象获取数据时，他会自己去获取数据，他会提供一个处理程序，数据到达时会调用这个处理程序。

request.onload = function() {if(request.status == 200) {alert(request.responseText);}
}//返回码是200时，表示成功
//request.resonseText是获取他的返回数据，返回值是一个json字符串，需要解析

5.最后一步，告诉请求对象去获取数据，为此要用到send方法。

request.send(null);
//这会把请求发送到服务器。如果不打算向远程服务发送任何数据，就要传入null

以下是一个例子：

//js
window.onload = function() {var url = "http://localhost/sales.json"var request = new XMLHttpRequest(); request.open("GET", url);request.onload = function() {if(request.status == 200) {updateSales(request.responseText);}};request.send(null);
}function updateSales(responseText) {var salesDiv = document.getElementById("sales");var sales = JSON.parse(responseText);for (var i = 0; i<sales.length; i++){var sale = sales[i];var div = document.createElement("div");div setAttribute("class", "saleItem");div.innterHTML = sale.name + " sold " + sale.sales + " gumballs";salesDiv.appendChild(div);}
}//对于数组中的每一项创建一个<div>，并制定class为saleItem（CSS会用到）
//用innerHTML设置<div>的内容，然后增加这个元素，作为sales<div>的子元素

//html
<body><div id="sales"></div>
</body>

注意：上面代码的请求，一切都是在一个域中执行的，如果是请求的其他域的东西，浏览器会认为是不安全的，会拒绝请求数据。

3）跨域下的web服务

浏览器安全策略

如果从某个域提供页面本身，安全策略要求不能从另一个域获取数据。就是防止其他人进入你的系统，出入一些JavaScript，拿走了用户的个人信息，并且与服务器通信对这些数据为所欲为。

当应用所在同一个域托管数据时，XMLHttpRequest是为应用获取数据的一种好的方法。当为第三方获取数据，需要用到JSONP（JSON with Padding）

JSONP是一种使用<scrip>标记获取JSON对象的方法，这也是一种获取数据的方法。

....
<body><h1>Mighty Gumball Sales</h1><div id= "sales"></div><script src="http://gumball.wickedlysmart.com"></script>
</body>

请求步骤

我们的HTML中包含一个<script>元素，这个script的源是一个Web服务的URL，这个Web服务将为我们提供JSON数据。
浏览器遇到页面中的<script>元素，并向src URL发送一个HTTP请求。
服务器正常处理这个请求，发回JSOON串之前，首先把他包装在一个函数调用中，如updateSales调用。
解析和解释JSON响应时，他包装在一个函数调用中。所以会调用这个函数，并把由JSON串创建的对象传入这个函数。

Web服务允许你指定一个回调函数。指定URL时，在末尾增加一个参数，就像这样

http://gumball.wickedlysmart.com/?callback=updateSales

当心浏览器缓存，大多数浏览器都有一个有趣的特性，如果你反复获取同一个URL,浏览器为了提高效率会把它缓存起来，所以你会反复的得到同样的缓存文件。解决方法如下:

var url = "http://gumball.wickedlysmart.com/?callback=updateSales" + "&random=" + (new Date()).getTime();

网页实时刷新

如果让网页实时刷新的话，就要设置一个定时器，可以设置每3秒请求一次网络数据。如果这样的话，需要每三秒就向服务器发一个<script src=url></script>来请求数据。就要把html中的<script>删除，在JavaScript中实时创建。

window.onload = function() {setInterVal(handleRefresh, 3000); //毫秒
}function handleRefresh() {var url = "http://gumball.wickedlysmart.com/?callback=updateSales" + "&random=" + (new Date()).getTime()"var = newScriptElement = document.createElement("script"); //创建一个新的script元素newScriptElement.setAttribute("src",url); //将这个元素的src属性设置为urlnewScriptElement.setAttribute("id", "jsonp");var oldScriptElement = document.getElementById("jsonp");var head = document.getElementByTagName("head")[0];if(oldScriptElement == null) {head.appendChild(newScriptElement);}else {head.replaceChild(newScriptElement, oldScriptElement);}
}

增量更新

当实时请求数据时，就有可能请求重复数据，怎么来去除重复数据在页面的显示呢？这就用到了增量更新。设置一个lastReportTime的变量，每次请求数据时，把最后一条最新的时间传给这个变量，并且把这个变量传给服务器，来获取这个时间段以后的数据，这样就可以防止有重复数据啦。

4）跨域的解决

jsonp:JSON with Padding,是为解决跨域请求资源而产生的解决方案,是种依靠开发人员创造出的一种非官方跨域数据交互协议。

一个是描述信息的格式，一个是信息传递双方约定的方法。

jsonp的产生:

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>

4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

5.而json又是一个轻量级的数据格式,还被js原生支持

6.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，

1、document.domain+iframe的设置

基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com 这种特点，

也就是两个页面必须属于一个基础域（例如都是xxx.com)，使用同一协议和同一端口，这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数

要点就是 :通过修改document.domain来跨子域

对于主域相同而子域不同的具体做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = ‘a.com’；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况，如果你异想天开的把script.a.com的domian设为alibaba.com那显然是会报错地！代码如下：

www.a.com上的a.html

document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){var doc = ifr.contentDocument || ifr.contentWindow.document;// 在这里操纵b.htmlalert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

script.a.com上的b.html

document.domain = 'a.com';

这种方式适用于属于一个基础域（例如都是xxx.com)，使用同一协议和同一端口{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面相互通信。

备注：某一页面的domain默认等于window.location.hostname。主域名是不带www的域名，例如a.com，主域名前面带前缀的通常都为二级域名或多级域名，例如www.a.com其实是二级域名。 domain只能设置为主域名，不可以在b.a.com中将domain设置为c.a.com。

问题：

1、安全性，当一个站点（b.a.com）被攻击后，另一个站点（c.a.com）会引起安全漏洞。

2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。

2、基于script标签实现跨域

虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function（包括操作cookie、Dom等等）。根据这一点，可以方便地通过创建script节点的方法来实现完全跨域的通信。具体的做法可以参考YUI的Get Utility

这里判断script节点加载完毕还是蛮有意思的：ie只能通过script的readystatechange属性，其它浏览器是script的load事件。以下是部分判断script加载完毕的方法。

js.onload = js.onreadystatechange = function() {if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {// callback在此处执行js.onload = js.onreadystatechange = null;}
};

法一：我在http://study.cn/json/jsonp/jsonp_2.html下请求一个远程的js文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title><script type="text/javascript">var message = function(data) {alert(data[1].title);};
</script><script type="text/javascript" src="http://web.cn/js/message.js"></script>
</head>
<body>
<div id='testdiv'></div>
</body>
</html>

远程的message.js文件是

message([{"id":"1", "title":"天津新闻联播，雷人搞笑的男主持人"},{"id":"2", "title":"楼市告别富得流油 专家:房价下跌是大概率事件"},{"id":"3", "title":"法国人关注时事 八成年轻人每天阅读新闻"},{"id":"4", "title":"新闻中的历史,历史中的新闻"},{"id":"5", "title":"东阳新闻20140222"},{"id":"6", "title":"23个职能部门要增加新闻发布频次"},{"id":"7", "title":"《贵州新闻联播》 中国美丽乡村"},{"id":"8", "title":"朝韩离散家属团聚首轮活动结束"},{"id":"9", "title":"索契冬奥会一天曝出两例兴奋剂事件"},{"id":"10", "title":"今天中国多地仍将出现中度霾"}]);

这个时候我们得到的相应头是:

这样就实现跨域成功了,因为服务端返回数据时会将这个callback参数(message)作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

法二：

让远程js知道它应该调用的本地函数叫什么名字,只要服务端提供的js脚本是动态生成的就好了,这样前台只需要传一个callback参数过去告诉服务端,我需要XXX代码,于是服务端就会得到相应了.

例如在http://study.cn/json/jsonp/jsonp_3.html页面请求http://192.168.31.137/train/test/jsonpthree

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title><script type="text/javascript">var messagetow = function(data){alert(data);};var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow";var script = document.createElement('script'); script.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>

得到的响应头是:

3）利用iframe和location.hash

这个办法比较绕，但是可以解决完全跨域情况下的脚本置换问题。原理是利用location.hash来进行传值。在url： http://a.com#helloword中的‘#helloworld’就是location.hash，改变hash并不会导致页面刷新，所以可以利用hash值来进行数据传递，当然数据容量是有限的。假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息，cs1.html首先创建自动创建一个隐藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html页面，这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据（由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe；Firefox可以修改）。同时在cs1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一点有变化则获取获取hash值。代码如下：

先是a.com下的文件cs1.html文件：

function startRequest(){var ifr = document.createElement('iframe');ifr.style.display = 'none';ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';document.body.appendChild(ifr);
}function checkHash() {try {var data = location.hash ? location.hash.substring(1) : '';if (console.log) {console.log('Now the data is '+data);}} catch(e) {};
}
setInterval(checkHash, 2000);

cnblogs.com域名下的cs2.html:

//模拟一个简单的参数处理操作
switch(location.hash){case '#paramdo':callBack();break;case '#paramset'://do something……break;
}function callBack(){try {parent.location.hash = 'somedata';} catch (e) {// ie、chrome的安全机制无法修改parent.location.hash，// 所以要利用一个中间的cnblogs域下的代理iframevar ifrproxy = document.createElement('iframe');ifrproxy.style.display = 'none';ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';    // 注意该文件在"a.com"域下document.body.appendChild(ifrproxy);}
}

a.com下的域名cs3.html

//因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1)

当然这样做也存在很多缺点，诸如数据直接暴露在了url中，数据容量和类型都有限等

4）基于jquery跨域

那么如何用jquery来实现我们的跨域呢???jquery已经把跨域封装到ajax上了,而且封装得非常的好,使用起来也特别方便

如果是一般的ajax请求:

$.ajax({url:'http://192.168.31.137/train/test/testjsonp',type : 'get',dataType : 'text',success:function(data){alert(data);},error:function(data){alert(2);}        });

那么在浏览器中会报错:

jsonp形式的ajax请求:并且通过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){var name = 'chenshishuo';var sex = 'man';var address = 'shenzhen';var looks = 'handsome ';$.ajax({type : 'get',url:'http://192.168.31.137/train/test/testjsonp',data : {name : name,sex : sex,address : address,looks : looks,},cache :false,jsonp: "callback",jsonpCallback:"success",dataType : 'jsonp',success:function(data){alert(data);},error:function(data){alert('error');}        });
});
</script>
</head>
<body>
<input id='inputtest' value='546' name='inputtest'>
<div id='testdiv'></div>
</body>
</html>

jsonp 传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback 自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名,看看请求头和相应头吧
请求头:jquery会自动带入callback参数,当服务端获取到这个参数后,返回回来.(响应头)

5）window.name实现的跨域数据传输

文章较长列在此处不便于阅读，详细请看 window.name实现的跨域数据传输。

6）使用HTML5 postMessage

HTML5中最酷的新功能之一就是跨文档消息传输Cross Document Messaging。下一代浏览器都将支持这个功能：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已经使用了这个功能，用postMessage支持基于web的实时消息传递。

otherWindow.postMessage(message, targetOrigin);

otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。
message: 所要发送的数据，string类型。
targetOrigin: 用于限制otherWindow，“*”表示不作限制

a.com/index.html中的代码：

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {var ifr = document.getElementById('ifr');var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样// 若写成'http://c.com'就不会执行postMessage了ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>

b.com/index.html中的代码：

<script type="text/javascript">window.addEventListener('message', function(event){// 通过origin属性判断消息来源地址if (event.origin == 'http://a.com') {alert(event.data);    // 弹出"I was there!"alert(event.source);  // 对a.com、index.html中window对象的引用// 但由于同源策略，这里event.source不可以访问window对象}}, false);
</script>

参考文章：《精通HTML5编程》第五章——跨文档消息机制、https://developer.mozilla.org/en/dom/window.postmessage

7）利用flash

这是从YUI3的IO组件中看到的办法，具体可见http://developer.yahoo.com/yui/3/io/。
可以看在Adobe Developer Connection看到更多的跨域代理文件规范：ross-Domain Policy File Specifications、HTTP Headers Blacklist。