JSONP_跨域

2017-07-20 本文已影响0人山门龙龙

1.什么是同源策略

浏览器出于安全考虑，只能同本域进行接口交互。不同源的客户端脚本在未经许可的情况下，不允许读写对方的资源。
本域指的是协议、域名、端口都要相同：
1.协议，比如http和https是不同协议
2.域名，比如https://jirengu.com/a和https://jirengu.com/b是不同域名
3.端口，比如https://jirengu.com:80和https://jirengu.com:8080是不同端口

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

跨域就是访问非本域的资源
跨域的实现方式：
1.JSONP
2.CORS
3.降域
4.PostMessage

3.JSONP的原理是什么

script标签可以引入其它域的JS，利用这一特性，可以实现跨域访问接口，但前提是后端支持。
JSONP的实现过程：
1.在script标签中定义函数fun
2.在script标签中的src存放后端接口地址，并在后面添加callback=fun
3.后端接口经过处理，返回一个fun(data)的JSON字符串。
4.script接收后端返回的数据，然后fun(data)执行。

4.CORS是什么

全称cross origin resource sharing，译作跨域资源共享。发送一个跨域请求，前端不做任何处理，而是在后端加一个Access-Control-Allow-Origin，地址设为前端的url，这样只要是前端url发送过来的请求，都可以反问后端的接口。如果设为" * "，则所有的url都可以访问。
CORS 分为简单请求和复杂请求 , 具体可以查看阮一峰的BLOG

5.根据视频里的讲解演示三种以上跨域的解决方式，写成博客

1.JSONP
前端代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>news</title>
    <style>
        .container{
            width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="container">
    <ul class="news">
        <li>第11日前瞻：中国冲击4金 博尔特再战</li>
        <li>男双力争会师决赛 </li>
        <li>女排将死磕巴西！</li>
    </ul>
    <button class="change">换一组</button>
</div>

<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click',function () {
        var script = document.createElement('script');
        script.src = 'http://localhost:8080/getNews?callback=appendHtml';
        document.head.appendChild(script);
        document.head.removeChild(script);
    })
    function appendHtml(news) {
        var lis = '';
        for(var i=0; i<news.length; i++){
            lis += '<li>' + news[i] + '</li>';
        }
        console.log(lis);
        var ul = document.querySelector('ul');
        ul.innerHTML = lis;
    }
</script>
</body>
</html>

后端代码如下：

router.get('/getNews',function (req,res) {
    var news = [
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心",
        "没有中国选手和巨星的110米栏 我们还看吗？",
        "中英上演奥运金牌大战",
        "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
        "最“出柜”奥运？同性之爱闪耀里约",
        "下跪拜谢与洪荒之力一样 都是真情流露"
    ];
    var data = []
    for(var i=0; i<3 ;i++){
        var index = parseInt(Math.random() * news.length);
        data.push(news[index]);
        news.splice(index,1);
    }
    var callback = req.query.callback;
    if(callback){
        res.send(callback + '(' + JSON.stringify(data) + ')');
    }else{
        res.send(data);
    }
})

2.CORS
前端代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>news</title>
    <style>
        .container{
            width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="container">
    <ul class="news">
        <li>第11日前瞻：中国冲击4金 博尔特再战</li>
        <li>男双力争会师决赛 </li>
        <li>女排将死磕巴西！</li>
    </ul>
    <button class="change">换一组</button>
</div>

<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'http://localhost:8080/getNews', true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                appendHtml(JSON.parse(xhr.responseText));
            }
        }
    });

    function appendHtml(news) {
     var lis = '';
     for(var i=0; i<news.length; i++){
         lis += '<li>' + news[i] + '</li>';
     }
     console.log(lis);
     var ul = document.querySelector('ul');
     ul.innerHTML = lis;
    }
</script>
</body>
</html>

后端代码如下：

router.js('/getNews',function (req,res) {
    var news = [
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心",
        "没有中国选手和巨星的110米栏 我们还看吗？",
        "中英上演奥运金牌大战",
        "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
        "最“出柜”奥运？同性之爱闪耀里约",
        "下跪拜谢与洪荒之力一样 都是真情流露"
    ];
    var data = []
    for(var i=0; i<3 ;i++){
        var index = parseInt(Math.random() * news.length);
        data.push(news[index]);
        news.splice(index,1);
    }
    res.header('Access-Control-Allow-Origin', '*');
    res.send(JSON.stringify(data));
});

3.降域
原理是将主域名相同，子域名不同的域名都降低为主域名。这个时候域名相同，浏览器的同源策略就不会生效了。适用于在同一个页面中不同子域名之间的相互访问。
a.html代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .ct{
            width: 910px;
            margin: auto;
        }
        .main{
            float: left;
            width: 450px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .main input{
            margin: 20px;
            width: 200px;
        }
        .iframe{
            float: right;
        }
        iframe{
            width: 450px;
            height: 300px;
            border: 1px dashed #ccc;
        }
    </style>
</head>
<body>
<div class="ct">
    <h1>使用降域实现跨域</h1>
    <div class="main">
        <input type="text" placeholder="http://a.jinlong.com:8080/a.html">
    </div>

    <iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>

</div>

<script>
    document.querySelector('.main input').addEventListener('input',function () {
        window.frames[0].document.querySelector('input').value = this.value;
    });
    document.domain = 'jinlong.com';
</script>
</body>
</html>

b.html代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
        }
        input{
            margin: 20px;
            width: 200px;
        }
    </style>

</head>
<body>
<input type="text"  placeholder="http://b.jinlong.com:8080/b.html">

<script>
    document.querySelector('input').addEventListener('input',function () {
        window.parent.document.querySelector('.main input').value = this.value;
    });
    document.domain = 'jinlong.com';
</script>

</body>
</html>

4.PostMessage
postMessage比较适用于跨源通信，它的实现条件只需要协议、端口号、主机相同即可，对url无要求。所以在同一页面中，不同的url窗口，可以相互传递和接收数据。
a.html代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .ct{
            width: 910px;
            margin: auto;
        }
        .main{
            float: left;
            width: 450px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .main input{
            margin: 20px;
            width: 200px;
        }
        .iframe{
            float: right;
        }
        iframe{
            width: 450px;
            height: 300px;
            border: 1px dashed #ccc;
        }
    </style>
</head>
<body>
<div class="ct">
    <h1>使用降域实现跨域</h1>
    <div class="main">
        <input type="text" placeholder="http://a.jinlong.com:8080/a.html">
    </div>

    <iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>

</div>

<script>
    document.querySelector('.main input').addEventListener('input',function () {
        window.frames[0].postMessage(this.value,'*');
    });
    window.addEventListener('message',function (e) {
        document.querySelector('.main input').value = e.data;
    })
</script>
</body>
</html>

b.html的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
        }
        input{
            margin: 20px;
            width: 200px;
        }
    </style>

</head>
<body>
<input type="text"  placeholder="http://b.jinlong.com:8080/b.html">

<script>
    document.querySelector('input').addEventListener('input',function () {
        window.parent.postMessage(this.value,'*');
    });
    window.addEventListener('message',function (e) {
        document.querySelector('input').value = e.data;
    })
</script>

</body>
</html>

JSONP_跨域

1.什么是同源策略

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

3.JSONP的原理是什么

4.CORS是什么

5.根据视频里的讲解演示三种以上跨域的解决方式，写成博客

猜你喜欢

热点阅读

JSONP_跨域

1.什么是同源策略

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

3.JSONP的原理是什么

4.CORS是什么

5.根据视频里的讲解演示三种以上跨域的解决方式 ，写成博客

猜你喜欢

热点阅读

5.根据视频里的讲解演示三种以上跨域的解决方式，写成博客