同源、跨域、jsonp（面试常问）

来源：互联网发布：工业机械人怎么编程编辑：程序博客网时间：2024/06/01 12:46

提到跨域，就不得不说一下同源策略，同源策略是浏览器的一种安全策略，也就说a网站不能随便读取b网站的内容，试想一下，如果网站之间都可以随便读取互相的文件，比如一个黑客程序，他利用IFrame把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

所谓"同源"是指协议、端口号、域名相同，那么"跨域"就可以理解为不同源的网站之间的访问，最常见的应用是当我们调用ajax接口时如果不设置跨域浏览器会报错，这证明使用xmlHttpRequest对象不能发送跨域请求。

有疑惑的小伙伴肯定会问，那我用a标签和script标签请求其他网站，是不是就是跨域了呢？

这里要明白跨域是指在当前域下调用其他域下的东西，而链接则是直接跳转到对方的域下了，跟你之前的域名毫无关系。

如果想从你的网站跨域去另一个网站拿到一些资源，有一个前提条件是另一个网站的服务器支持跨域，这个需要在服务端设置，不同服务端设置方法不一样，这里我们不多说，就看客户端跨域如何解决。

解决跨域最常见方法是jsonp方式，jsonp是jquery给我们封装的一个方法，使用方法如下：

[javascript] view plain copy
$.ajax({  
                   url:"http://api.map.baidu.com/telematics/v3/weather?ak=6tYzTvGZSYB5Oc2YGGOKt8&location=天津&output=json",  
                   type:"get",  
                   dataType:"jsonp",  
                   success:function(data){  
                       console.log(data);  
                   }  
               })  

上面代码是当我们调用外部的一个接口时，通过设置jquery的ajax方法里面的datatype属性的值为jsonp就可以成功调用这个接口了。

现在当有人问起你如何解决跨域，你说用jsonp，这时候我相信不懂的人一定还是不懂，哈哈，人家会想jsonp是个什么鬼？

这就告诉我们学东西要知其然而知其所以然，也许我们以为script标签只能引用本地文件，却不知script标签也可以发送请求，下面就是jsonp的原理

[html] view plain copy
<body>  
<input type="button" value="script 标签发送请求，接收数据">  
<script>  
        function getInfo(obj){  
             console.log(obj.username);<span style="font-size:13.3333px;font-family:'宋体';">//拿到数据 张三.</span>  
        };  
        document.querySelector("input").onclick=function(){  
               var script=document.createElement("script");  
               //能发跨域请求，绝对能发不跨域的请求的  
               script.src="05cross.php?callback=getInfo";//<span style="font-size:13.3333px;font-family:'宋体';">js 去解析，调用这个函数，就会在script 标签里面找这个函数。  
</span>               document.body.appendChild(script);  
              /*通过js 去接收到数据.*/  
              //现在的数据直接浏览器拿到之后按照js 的方式去解析，所以报错  
        }  
</script>  
</body>  

[php] view plain copy
<?php  
        //获取到的这个叫做getInfo  
        $_call=$_GET["callback"];  
        $data='{"username":"张三"}';  
        echo $_call."(".$data.")";  
        //返回到客户端就是<span style="font-size:13.3333px;font-family:'宋体';">getInfo({</span><span style="font-size:13.3333px;font-family:'宋体';">"username":"张三"</span><span style="font-size:13.3333px;font-family:'宋体';">})的调用结果</span>  
?>  

jsonp跨域的原理
1:使用script 标签发送请求，这个标签支持跨域访问
2：在script 标签里面给服务器端传递一个 callback
3：callback 的值对应到页面一定要定义一个全局函数（为什么是全局？因为服务端接收到callback函数后会返回页面中的script中去找，如果不写在全局作用域中根本找不到）
4：服务端返回的是一个函数的调用。调用的时候会吧数据作为参数包在这个函数里面。

缺点：jsonp只能解决get方式的跨域

阅读全文

'); })();