如何解决跨域问题

1、JSONP

原理：动态插入script标签，经过script标签引入一个js文件，这个js文件载入成功后会执行咱们在url参数中指定的函数，而且把须要的json数据做为参数传入。

因为同源策略的限制，ajax请求值容许当前源（端口、协议、域名相同）的资源，为了实现跨域请求，能够经过script标签实现跨域请求，而后在服务器端输出json数据并执行回调函数，从而解决跨域的数据请求。

优势是兼容性好，简单易用，支持浏览器与服务器双向通讯。缺点是只支持GET请求。

JSONP：json+padding（内填充），就是把padding填充到一个盒子里。

 1 <script>
 2     function createJs(sUrl){
 3 
 4         var oScript = document.createElement('script');
 5         oScript.type = 'text/javascript';
 6         oScript.src = sUrl;
 7         document.getElementsByTagName('head')[0].appendChild(oScript);
 8     }
 9 
10     createJs('jsonp.js');
11 
12     box({
13        'name': 'test'
14     });
15 
16     function box(json){
17         alert(json.name);
18     }
19 </script>

 

2、CORS

CORS（Cross-Origin Resource Sharing跨域资源共享），当一个请求url的协议、端口、域名三者之间任意一与当前页面地址不一样即为跨域。

例如最多见的，在一个域名下的网页中，调用另外一个域名中的资源。它容许浏览器向跨源服务器发出ajax请求，从而克服了ajax只能同源使用的限制。

 

3、document.domain

document.domain用来获取当前网页的域名

1     <script>
2         window.onload=function(){
3             javascript:alert(document.domain);
4         }
5     </script>

浏览器显示

document.domain主要解决子域与父域之间的传值

问题描述：

现有父域：http://b.com/b.com.html

要向子域：http://a.b.com/a.b.com.html，获取数据怎么办？

将document.domain='b.com'，都设置为父域便可

将子域和父域的domcument.domain设置为同一个父域的前提条件：这两个域名必须属于同一个基础域名，并且所用的协议、端口都要一致，不然没法利用document.domain进行跨域

 

4、window.name

window对象有个name属性，该属性有个特征：即在一个窗口（window）的生命周期内，窗口载入的全部页面都是共享一个window,name的，每一个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的全部页面中的，并不会因新页面的载入而进行重。

window.name+iframe实现跨域。

iframe是html的一个标签，能够在网页中建立内联框架，有个src属性（指向文件地址、html、php等）能够选择内联框架的内容。

window.name（通常在js代码里出现）的值不是一个普通的全局变量。而是当前窗口的名字，这里要注意的是每一个iframe都有包裹它的window，而这个window是top window的子窗口，而它天然也有window.name的属性，window.name的神奇之处在于name值在不一样的页面（甚至不一样域名）加载后依旧存在（若是没修改则值不会变化），而且能够支持很是长的name值（2MB）

 

5、window.postMessage 

window.postMessage方法是html5新引进的特性，可使用它来向其余的window对象发送消息，不管这个对象是属于同源或不一样源，目前IE8+、Firefox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用window.postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串。第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，若是不想限定域，可使用通配符*。

须要接收消息的window对象，能够是经过监听自身的message事件来获取传过来的消息，消息内容存储在该事件对象的data属性中。

上面所说的向其余window对象发送消息，其实就是指一个页面有几个框架的那种状况，由于每个框架都有一个window对象。在讨论第二种方法的时候，咱们说过，不一样域的框架间是能够获取到对方的window对象的，并且也可使用window.postMessage这个方法。下面看一个简单的示例，有两个页面