同源&跨域

1 同源

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

同源策略的限制 

      1 Cookie、LocalStorage 和 IndexDB 无法读取

      2  无法操作跨域的iframe里的dom元素

      3  AJAX 请求不能发送 

2 跨域

不同源则跨域 例如http://www.example.com/

http://api.example.com/detail.html  不同源 域名不同  
https//www.example.com/detail.html   不同源 协议不同  http://www.example.com:8080/detail.html    不同源    端口不同  http://api.example.com:8080/detail.html    不同源    域名、端口不同  https://api.example.com/detail.html    不同源    协议、域名不同  https://www.example.com:8080/detail.html    不同源    端口、协议不同  http://www.example.com/detail/index.html    同源    只是目录不同  

3 跨域方案

1、顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）

<iframe id="iframe" src="http://api.study.com/domain.html" frameborder="0"></iframe>
<script>
// 这种情况适合 顶级域名相同的情况
// 测试时需要配置一个二级域名
document.domain = 'study.com';

2、document.domain + iframe

3、window.name + iframe

4、location.hash + iframe

 

 

<iframe id="iframe" src="http://api.study.com/hash.html#name|xjj" frameborder="0"></iframe>

5、window.postMessage()

参考资料 http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html

4、 jsonp(自认为重点)

JSON with Padding

1、原理剖析

其本质是利用了标签具有可跨域的特性， 由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来， 此方法需要前后端配合完成。

<!--
当我们用script标签去加载的时候  会把内容解析成js去执行
--><script>function fuc(data){
        console.log(data.name);
    }
</script><scriptsrc="http://www.guangzhou.com/api.php?callback=fuc"></script>

$(function(){//jQ中的有ajax的方法  可直接解决跨源的问题  只需要dataType:'jsonp'  返回数据data就是所需数据，用前打印看看是怎样的数据类型，还的结合后台给的端口数据
$.ajax({
type:'get',
url:'http://api.study.com/01.php',
dataType:'jsonp',
//jsonpCallback:'test()',
success:function(data){
var data = JSON.parse(data);
console.log(data.name);
        },
error:function(){
console.log(1);
        }
    });
});