跨域的理解

跨域的理解

什么是跨域？

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

　　首先什么是跨域，简单地理解就是由于JavaScript同源策略的限制，a.com 域名下的js没法操做b.com或是c.a.com域名下的对象。更详细的说明能够看下表： 

 

1	http://www.a.com/a.js http://www.a.com/b.js	同一域名下	容许
2	http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不一样文件夹	容许
3	http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不一样端口	不容许
4	http://www.a.com/a.js https://www.a.com/b.js	同一域名，不一样协议	不容许
5	http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不容许
6	http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不一样	不容许
7	http://www.a.com/a.js http://a.com/b.js	同一域名，不一样二级域名（同上）	不容许（cookie这种状况下也不容许访问）
8	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”。

动态建立script（JSONP） 

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

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

封装后的jsonp

 1 document.onclick = function(){  2         var url = "http://localhost/jsonp/data/jsonp3.php";  3         jsonp(url,function(res){  4  alert(res)  5  },{  6             user:"admin",  7             pass:123,  8             // 根据后台指定的字段名，传入回调函数名，传给后台
 9             zxc:"ewqrwer213213213", 10             // 用来保存后台接收的 回调函数名所在的字段名，传给本身的函数
11             columnName:"zxc"
12  }) 13  } 14 
15     function jsonp(url,callback,data){ 16         // 解析要发送的数据
17         data = data || {}; 18         var str = ""; 19         for(var i in data){ 20             str += `${i}=${data[i]}&`; 21  } 22         // 将数据拼接到url
23         url = url + "?" + str.slice(0,str.length-1); 24 
25         // jsonp的功能：1.建立script
26         var script = document.createElement("script"); 27         script.src = url; 28  document.body.appendChild(script); 29 
30         // jsonp的功能：2.建立准备被资源执行的全局函数
31         window[data[data.columnName]] = function(res){ 32  callback(res); 33  } 34     }