跨域问题6种解决方式

为什么会有跨越问题？
因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器
执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

下面介绍5种解决跨域的方法

1. 通过jsonp跨域

利用页面上可以引入不同域上的js脚本文件。步骤如下：
1. 浏览器端注册callback回调函数。
2. 然后动态生成一个 script 标签，src 为：请求资源的地址＋获取函数的字段名＋回调函数名称。
3. 让服务端拿到回调函数名称，填充数据返回一段js代码给浏览器
4. 浏览器执行
具体代码：

function resolveJosn(result) { //浏览器端代码
    console.log(result.name);
}
var jsonpScript= document.createElement("script");
jsonpScript.type = "text/javascript";
jsonpScript.src = "http://www.qiute.com?    
callbackName=resolveJson";
document.getElementsByTagName("head")[0].appendChild(jsonpScript);

php //服务器端代码
<?php
    $callback = $_GET['callback'];  // 获取回调函数名
    $arr = array("name" => "alsy", "age" => "20"); // 要请求的数据
    echo $callback."(". json_encode($arr) .");"; // 输出
?>

2. 通过修改document.domain来跨子域（iframe）

特点：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致。
使用方法：document.domain 的设置是有限制的，我们只能把 document.domain 设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com 中某个文档的 document.domain 可以设成a.b.example.com、b.example.com、example.com中的任意一个，但是不可以设成c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。
具体代码：
// 主页面：http://blog.qiutc.me/a.html
<script>
document.domain = 'qiutc.me';

function onLoad() {
    var iframe = document.getElementById('iframe');
    var iframeWindow = iframe.contentWindow; // 这里可以获取 iframe 里面 window 对象并且能得到方法和属性
    var doc = iframeWindow.document; // 获取到
    iframeWindow.getData('http://www.qiutc.me/json_domain.php', '{u: "alsy-domain", age: "20"}', function(r) {
        console.log(eval("(" + r + ")"));
    });
} //由于json_domain.php与下面的框架同域，所以可以这样通过子域获取数据
</script>
<iframe src="http://www.qiutc.me/b.html" onload="onLoad()" </iframe>
    // iframe 里面的页面(在另一个文件中)
    <script>
    document.domain = 'qiutc.me';
    window.getData = function(url, data, cb) {
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.open('POST', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                cb(xhr.responseText);
            }
        }
        xhr.send(data);
    }
    </script>

3. 隐藏的iframe+window.name跨域

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

比如有一个www.sdc.me/a.html页面，需要通过a.html页面里的js来获取另一个位于不同域上的页面www.baidu.com/data.html里的数据。步骤：
1.把a。html里的iframe的src设为www.baidu/data.html。
2.iframe的src设成跟a.html页面同一个域才行，这样才符合同源策略。

www.baidu.com/data.html 代码如下：

 <script>
     window.name = '我是被期望得到的数据';
 </script>

在 a.html 页面中使用一个隐藏的 iframe 来充当一个中间人角色，由 iframe 去获取 data.html 的数据，然后 a.html 再去得到 iframe 获取到的数据。代码如下：

// a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function getData() {
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = iframe.contentWindow.name; // 得到
    }
    iframe.src = 'b.html'; // 这里b和a同源
}
</script>
</head>
<body>
<iframe src="http://www.baidu.com/data.html" style="display:none" onload="getData()" </iframe>
</body>
</html>

4.frame+跨文档消息传递

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源.
步骤：

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

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

// 主页面 blog.qiutc.com
 <script>
 function onLoad() {
     var iframe = document.getElementById('iframe');
     var iframeWindow = iframe.contentWindow;
     iframeWindow.postMessage("I'm message from main page.");
 }
 </script>
 <iframe src="http://www.qiutc.me/b.html" onload="onLoad()" </iframe>
     // b 页面
     <script>
     window.onmessage = function(e) {
         e = e || event;
         console.log(e.data);
     }
     </script>

5.跨域资源共享 CORS

服务器响应头：Access-Control-Allow-Origin它的值设置成 *，表示接受任意域名的请求。
如果要发送Cookie，Access-Control-Allow-Origin就不能设为*，必须指定明确的、与请求网页一致的域名。

6. WebSockets

HTML5新增的一大特性之一就是： Web Sockets 其目标是在一个单独的持久连接上提供全双工、双向通信。在 JavaScript 中创建了 Web Socket 之后，会有一个HTTP 请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会使用 HTTP 升级从 HTTP 协议交换为 WebSocket 协议。也就是说，使用标准的 HTTP 服务器无法实现 Web Sockets，只有支持这种协议的专门服务器才能正常工作。
同源策略对 Web Sockets 不适用，因此可以通过它打开到任何站点的连接。至于是否会与某个域中的页面通信，则完全取决于服务器。（通过握手信息就可以知道请求来自何方。）