同源和跨域的知识点

同源

1.同源的概念

同源（也叫同源策略），是浏览器中的一种安全机制

2.同源的规则

同源指‘三个相同’，协议相同，域名相同，端口号相同（简单来说，就是同一个网站）
http://www.zs.com/8088
http://www.zs.com/80 端口号不同
http://www.ls.com/8088 域名不同
https://www.zs.com/8088 协议不同

3.同源的目的

是为了保护用户信息的安全，防止恶意网站窃取信息

4.同源策略的限制范围（也就是不同源的情况）

cookie,localStorage,IndexDB无法读取
DOM无法获取
ajax请求不能发送（并不是说请求不能发送了，而是在请求的过程中被拦截了）

注意点：同源机制的判断时机：
发送ajax请求时，不判断两个页面是否同源（可以发送请求）
浏览器也可以接收到后台响应的内容（能接收响应）
接收到响应后，浏览器才会根据同源策略判断响应内容的页面和当前页面是否是同源的，如果是同源的，请求发送成功；否则就拦截

跨域

1.出现的原因

根据同源策略，只能是同源的网站之间才可以请求数据；但实际是需要请求不同源网站的数据（比如百度请求淘宝的数据），所以引入了跨域的概念。

2.跨域的目的

实现不同源的网站之间可以相互请求数据，但是，浏览器是不支持跨域的，所以要解决主流浏览器的跨域数据访问的问题。

3. 解决跨域问题有两种方式：jsonp 和CORS

1. jsonp（Json with padding）

因为img,link,script标签不受同源策略的影响，所以用它们来解决跨域的问题。

jsonp的原理：

利用script标签不受同源策略的限制，实现跨域请求。

jsonp 的特点

1.必须使用get请求
2.没有兼容性问题

jsonp发送跨域请求

html中
（原生发送jsonp的写法）

 		<script>

            //ajax发送请求只用于同源网站之间
            //实际工作中,需要让不同源的网站之间可以互相请求数据,因此,需要跨域
            //jsonp
            //作用: 解决主流浏览器的跨域数据访问的问题
            //原理:利用script标签不受同源策略的限制,实现跨域请求
            
            //jsonp方式请求数据
            function fun(res){
                console.log( res ); //要从后台拿到数据
            }

        </script>
         <!-- 把函数名上传给后台，避免了前后台交互时，函数名不一致导致获取不到数据的问题 -->
        <script src="http://www.zs.com/8088/json.php?callback=fun"></script>

jQuery发送jsonp请求的写法（利用了ajax方法）

$.ajax({
                // 跨域的地址 （ajax内部会自动把函数名拼接到地址后）
                url:'http://www.zs.com/8088/json.php',
                // jsonp必须用get请求（因为要函数名要拼接到地址后面）
                type:'get',
                // dataType必须写jsonp，才表示发送的是jsonp请求
                dateType:'jsonp',
                success:function(res){
                    console.log( res );
                }
            })

php中

<?php

header('content-type:text/html;charset=utf-8');
 $arr=[
    'name'=>'zs',
    'age'=>10
 ];
 $str=json_encode($arr);
//  拿到函数名，再把后台的数据作为函数的实参返回出去
// 在php中 ，用 . 来拼接
 echo $_GET['callback']."($str)";
?>

2.CORS(跨域资源共享）

使用它的前提：（1）浏览器支持这个功能（IE10+） （2）服务器允许跨域
只需要在服务器上写

//cors解决跨域 ，只需要在服务器代码中添加以下代码
//  * 允许所有的域名访问这个接口
 header('Access-Control-Allow:*');
//只允许www.zs.com这个域名访问这个接口
// header('Access-Control-Allow:www.zs.com');

cors和jsonp的对比
相同点：都需要后台的配合
不同点：jsonp 必须使用get请求，没有兼容性问题；cors 哪种请求都可以，但是有兼容性问题，IE10以上的支持。
总结：
1.跨域行为是浏览器行为，响应回来了，只是浏览器的安全机制限制了
2.服务器之间不存在跨域