同源和跨域

  同源机制指的是一个脚本不可以请求与它不同域下的资源,非同源的请求就是跨域的请求,其实只要协议、域名、端口有一个不同,就算跨域。这种机制是为了防止出现盗链(一个站点的网页引用其它网站的诸如图片的资源。)或者将银行网页挂到自己的网页上得到假的网银账户页面,以此窃取账户信息(iframe)。
    但是有很多情况需要跨域访问。存在着不同的跨域访问方法,这里简要介绍Jsonp和CORS两种。
    Jsonp用来跨域获取json数据。Jsonp可以跨域是因为<script>标签中的src属性的url可以跨域访问,而且js原生支持json数据。这样我们就可以跨域调用包含json的js文件,来获取json数据。具体流程是动态建立一个script标签,标签内注册一个回调函数,函数内容为对
取得的数据的操作,然后把注册的函数的名字塞到src的url中传递给服务器,服务器将会把请求的json数据放到传来的函数名参数对应的函数参数中返回,这相当于返回一个函数的调用。最终结果是以服务器端的json数据为参数调用注册的函数。所以,jsonp的请求,返回的结果是一个函数调用。这样script标签请求返回后,这个函数调用会立即执行,就可以得到我们想要的结果了。
示例如下:(假设请求的数据是{a: ‘a’, b: ‘b’, c: ‘c’})

<script type="text/javascript">    
    function jsonpCallback(result) {    
        alert(result.a);    
        alert(result.b);    
        alert(result.c);    
        for(var i in result) {    
            alert(i+":"+result[i]);//循环输出a:1,b:2,et   
        }    
    }    
</script>    
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>
这是服务器返回的结果是:  jsonpCallback({a: ‘a’, b: ‘b’, c: ‘c’});
    CORS的主要思想是在服务器端设置一个权限,对进来的请求判断是否拥有访问权限,对拥有访问权限的请求进行响应。

欢迎分享本文,转载请保留出处:前端ABC » 同源和跨域

赞 (0)
分享到:更多 ()

发表评论 0