二十六、跨域（jsonp解决跨域）

概念

在web有一种现象：不同的域名之间相互分享资源(信息)并进行通信。
这种现象叫做：跨域。

表面上看起来多个站点之间的来往增加是非常好的，但是其中弊端却是更大的。因为你不知道其他站点会拿你分享给他的信息做什么事情。所以出于安全性的考虑，在web中跨域这种现象默认是不允许的。

同源策略

即协议(http)，域名(www.xxx.com)，端口(80)都一致。其中三者有一个不一致就属于跨域

天生就能跨域的标签

    1，<img>
  
    2，<iframe>
​
    3，<link>
​
    4，<script>

跨域解决方案

方法1：后端声明header头


方法2：JSONP （通过script标签向服务器发送请求，服务端将json数据放到回调函数中）
同源策略，限制不可以

cookie、h5存储

dom

异步请求

---

但是我可以通过src进一步操作

jsonp不是发送异步请求，而是通过js函数的方式来实现数据获取

jsonP的基本实现

关于jsonP的具体实现非常简单，首先我们需要两个

    // 第一个<script>
​
    <script>
        function getData( data ){    // 定义一个获取数据的函数
            console.log( data );
        }
    </script>
​
    // 第二个<script>
​
    // 想bbb网站发送数据请求，并且在？号后传值callback
​
    <script src="http://www.bbb.com/index.php?callback=getData"></script>

服务器端代码：

   <?php
        $callback = $_GET['callback'];
        echo "$callback({data:'哈哈，跨域成功！'})";
    ?>

jsonp小案例
jsonP请求百度的数据

<meta charset="UTF-8">
<input type="text" id="txt" list="datalist">
​
    <datalist id="datalist"></datalist>
    
<script>
         // 当数据返回时的回调函数
    function getData(data){
        var datalist = document.getElementById('datalist');
        console.log(data);
        for( var i=0;i<data.s.length;i++ ){
            var option = document.createElement('option');
            option.value = data.s[i];
            option.innerText = data.s[i];
            datalist.appendChild(option);
        }
    }
    // 当键盘每一次被按下的时候都会新建一个<script>标签插入body中
    document.getElementById('txt').onkeydown = function() {
        var script = document.createElement('script');
        script.src = 'http://www.baidu.com/su?wd='+document.getElementById('txt').value+'&cb=getData';
        document.body.appendChild(script);
    };
</script>

执行结果：

方法3（了解）：修改web服务器配置（了解） apache/nginx等


方案4：前端通过代理技术

小总结

什么是跨域：顾名思义跨域名请求，也就是a网站请求了b网站的数据产生跨域
跨域导致原因：浏览器同源策略
同源策略规则：只要 协议、域名、端口 有一个不一样 则称之为 跨域

跨域后

cookie和h5客户端存储                不能用
dom                                不能操作
异步请求                            不能发送

同源策略：保证网站数据安全
解决跨域：

1-后端声明header头    header("Access-Control-Allow-Origin: *")
2-**JSOP原理   	  
     2.1-静态页面通过script标签加载接口，
	 2.2-接口调用函数 实参是要响应的数据，
	 2.3-静态页面声明函数，接受参数
3-服务器配置（了解）
4-**前端代理

jsonP的优缺点
优点

显而易见的简单方便，也不会有类似于浏览器兼容不了的毛病，直接响应数据，快速实现双向通信。

缺点

1， jsonP是从其他域中加载代码执行，这时我们对外域的安全需要有一定的认识，如果它们不安全导致的问题可能会很严重，所以这时我们除了放弃jsonP没有其他办法。
2，它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。