跨域

作者: Eazer | 来源:发表于2017-06-28 03:17 被阅读0次

    1.什么是同源策略?

    同源是指协议、域名、端口都必须是是一致的,其中一种不一致即不同源。
    浏览器出于安全考虑而定制的策略,只允许本域下的接口交互,不同源的客户端脚本在没有明确授权的情况下不能读写对方资源。

    2.什么是跨域?跨域有几种实现形式?

    跨域指允许不同域的接口进行交互

    • JSONP :利用src属性引入其他域下的js,实现跨域访问接口,需要后端支持。

    • CORS:全称是跨域资源共享( cross-origin-resource-shareing)IE10及以上支持

    • 降域:只有同属于一个域名的二级域名才能够使用这种方式

    • postMessage

    3.JSONP 的原理是什么?

    JSONP的原理是利用src属性引入其他域下的JS,需要后端返回数据是一个函数调用,处理后的数据作为函数的参数传入。

    • 定义数据处理函数_fun
    • 创建script标签,src的地址执行后端接口,最后加个参数callback=_fun
    • 服务端在收到请求后,解析参数,计算返还数据,输出 fun(data) 字符串。
    • fun(data)会放到script标签做为js执行。此时会调用fun函数,将data做为参数。

    4.CORS是什么?

    CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。 当你使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别,代码完全一样。

    5.演示三种以上跨域的解决方式?

    JSONP

    前端代码

    $(`.change`).addeventListener('click',function(){
    var script = document.createElement('script');
    script.src = 'http://127.0.0.1/getNews?callback=appendHTML';
    document.head.appendChild(script);
    document.head.removeChild(script);
    });
    
    function appendHTML(news){
        var html = '';
        for( var i=0; i<news.length; i++){
            html +='<li>' + news[i] + '</li>';
        }   
        console.log(html);
        $('.news').innerHTML = html;
    }
    
    function $(id){
        return document.querySelector(id);
    }
    

    后端代码

    var cb = req.query.callback;//获取函数名
    if(cb){
        res.send(cb +'('+JSON.stringify(data) + ')'); //拼装函数返回调用
    }else{
        res.send(data);
    }
    

    CORS

    前端代码

    $('.change').addEventListener('click', function(){
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'http://b.jrg.com:8080/getNews', true);
    xhr.send();
    

    后端代码

    res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");
    res.send("Access-Control-Allow-Origin", "*");
    res.send(data);
    

    降域

     document.domain = 降域后域名
    

    postMassage

    a.html代码

    <div class="ct">
    <h1>使用postMessage实现跨域</h1>
    <div class="main">
        <input type="text" placeholder="http://a.jrg.com:8080/a.html">
    </div>
        <iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>
    </div>
    <script>
     //URL:http://a.jrg.com:8080/a.html
    $('.main input').addEventListener('input', function(){
        console.log(this.value);
        window.frames[0].postMessage(this.value,'*');
    })
    
    window.addEventListener('message',function(e){
        $('.main input').value = e.data
        console.log(e.data);
    }
    function $(id){
        return document.querySelector(id);
    }
    
    </script>
    

    b.html代码

    <script>
    
    //URL:http://b.jrg.com:8080/b.html
    $('#input').addEventListener('input', function(){
        window.parent.postMessage(this.value, '*');
    })
    window.addEventListener('message',function(e) {
            $('#input').value = e.data
        console.log(e.data);
    });
    function $(id){
        return document.querySelector(id);
    }    
    </script>
    

    【个人总结,如有错漏,欢迎指出】
    :>

    相关文章

      网友评论

        本文标题:跨域

        本文链接:https://www.haomeiwen.com/subject/qepycxtx.html