JSONP_跨域

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
前端代码如下：




    
    
    news
    



    
        第11日前瞻：中国冲击4金 博尔特再战
        男双力争会师决赛 
        女排将死磕巴西！

后端代码如下：

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
前端代码如下：




    
    
    news
    



    
        第11日前瞻：中国冲击4金 博尔特再战
        男双力争会师决赛 
        女排将死磕巴西！

后端代码如下：

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代码：




    
    
    
    Document
    



    使用降域实现跨域

b.html代码：




    
    
    
    Document

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




    
    
    
    Document
    



    使用降域实现跨域

b.html的代码：




    
    
    
    Document