跨域问题与解决方案

说到跨域，比跨不过去的地方：同源策略（引起跨域问题的策略）
所以，文章开头先来简单的介绍一下同源策略

什么是同源策略？

判断同源的三个要素：
1. 相同的协议
2. 相同的域名
存在的意义：
  假设没有同源策略，那么我在A网站下的cookie就可以被任何一个网站拿到；那么这个网站的所有者，就可以使用我的cookie(也就是我的身份)在A网站下进行操作。
  同源策略可以算是 web 前端安全的基石，如果缺少同源策略，浏览器也就没有了安全性可言

跨域的方式和原理

1. JSONP

 原理：
  JS文件不受通院策略的影响。（不仅如此，凡是拥有”src”这个属性的标签都拥有跨域的能力，不受同源策略影响，比如、
script标签、img标签、iframe标签）
 方法方式：
 a. 通过请求一个src请求相应的路径带上一个callBack=callback参数，让后台返回的时候将动态的data填写在这个callBack参数当中，既callback(data)，这样当数据过来的时候，我们就可以调用自己页面已经定义的一个callback函数对data进行处理了；

function createScript(where){
    var script = document.createElement("script");
    script.setAttribute("type" , "text/javascript");
    srcipt.setAttribute("src" , where);
    document.body.appendChild(script);
}
//调用的时候
createScript("www.xxx.xxx/xxx.xxx?callBack=callback");

function callback(data){
//doSomething Here处理我们的data的函数
}

 b. jQuery早就对这些做好了接口，帮我们处理了，所以在实际应用当中只要这样调用即可：

$.ajax({
  url: 'www.xxx.xxx/xxxx.xxx', //不同的域
  type: 'GET', // jsonp模式只有GET是合法的
  dataType: 'jsonp', // 数据类型
  jsonp: 'callback', // 指定回调函数名，与服务器端接收的一致
  success: function(data) {
    //doSomething Here处理我们的data
  }
})

2. 反向代理与Nginx

 原理：跨域的问题存在于外部请求与不同的域名下，不痛的服务器之间交流，这个时候我们统一设置一个代理服务器，来处理来自外部的请求，再通过代理服务器去请求相应的服务器返回结果之后再返回给用户，这样对于外部来说我们就是一个统一的接口，而同源策略在服务器之间的交流不会有影响，其中之一就Nginx反向代理
 方法方式：

3. HTML5之postMessage

 原理： window.postMessage() 方法被调用时，会在所有页面脚本执行完毕之后
 方法方式：
a. 发送方语法：

    otherWindow.postMessage(message, targetOrigin, [transfer]);

message：你要传送的信息，将被结构化克隆算法序列化
targetOrigin：消息的发送地点，可以是”*“也可以是一个URI，在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；
transfer： 是一串和message 同时传递的 Transferable 对象（暂时不知道啥意思，以后来补充）
   b. 接收方：通过监听message事件，来触发接收message的回调函数；

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  // 对于谷歌来说, origin属性在event.originalEvent里面
  var origin = event.origin || event.originalEvent.origin; 
  if (origin !== "http://example.com:8080")
    return;
  // do Sometings Here
}

event下有用的属性：
   event.data: 从其他 window 中传递过来的消息；
   event.origin: 调用 postMessage时消息发送方窗口的 origin（”http:example.com:8080”）；
   event.source: 对发送消息的窗口对象的引用;可以使用此来在具有不同origin的两个窗口之间建立双向通信
  
  需要注意的是，大家设置发送和监听事件的时候一定要设置origin，避免自己的信息被别人监听到，避免监听到奇怪的其他地方的信息；

4. 设置CROS(XHR2)

 原理：新版本提供的新功能，更深入的原理我。。。也不知道
 方法方式：
先来看看xhr的步骤：
1. 先var xhr = new XMLHttpRequest(); new一个xhr对象；
2. 监听一下onreadystatechange事件；
3. open一下xhr；
4. 最后send出去，等回调；
其实这个方法主要是，服务器去设置，我们的xhr步骤基本一样的；

参考：

1.MDN：
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
2.阮一峰博客：
http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html