跨域的解决方式

什么是跨域

跨域，指的是浏览器不能执行其他网站的脚本,就是跨域名，跨端口，跨协议。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

跨域的几种方法

JSONP

html中script标签可以引入其他域下的js，比如引入线上的jquery库。利用这个特性，可实现跨域访问接口。需要后端支持
echo $cb . '&&' . $cb . '(' . json_encode($ret) . ')';

1. 定义数据处理函数_fun
2. 创建script标签，src的地址执行后端接口，最后加个参数callback=_fun
3. 服务端在收到请求后，解析参数，计算返还数据，输出 fun(data) 字符串。
4. fun(data)会放到script标签做为js执行。此时会调用fun函数，将data做为参数。
   1）代码：

function handleResponse(response){
    console.log('The responsed data is: '+response.data);
}
var script = document.createElement('script');
script.src = 'http://www.baidu.com/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({"data": "zhe"})*/
//原理如下：
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({"data": "zhe"}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成

CORS

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。

CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
1）代码：

var xhr =  new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){
            console.log(xhr.responseText);
        }
    }
}
xhr.open('get', 'http://www.baidu.com');
......
xhr.send(null);

降域

允许相同域名之间共享资源。
1）a.com/index.html代码:

<div>
        <input type="text" placeholder="http://a.jrg.com:8080/a.html" />
        <iframe src="http://b.jrg.com:8080/b.html" frameborder="0"></iframe>
     </div>
    
    <script>
        document.domain = "jrg.com"
    </script>

通过document.domain = "jrg.com"降域，域名相同可以相互通信。

postMessage

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

1. 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>

2. 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>

原理：
a.com/index.html 向iframe src发送消息等待处理，而不是直接修改dom元素。
b.com/index.html 监听message事件，获取到a.com的消息并做对应处理，从而达到数据的互通。