跨域

同源策略（Same origin Policy）

浏览器出于安全方面考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

本域指的是？

• 同协议：如都是http或这https、file、ssh、mailto、tel
• 同端口：如都是http://jirengu.com/a 和 http://jirengu.com/b
• 同域名：如都是80端口

不同源的列子

• 协议不同 > http://jscode.me　和　https://jscode.me
• 域名不同 > http://jirengu.com/a.html 　　和　　http://a.jirengu.com/b.html
• 端口不同 > http://jirengu.com:80/a.html 和　http://jirengu.com:8080/b.html

题目2: 什么是跨域？跨域有几种实现形式

跨域就是允许不同的域进行交互。

４种实现形式:

1. JSONP
2. CORS
3. 降域
4. postMessage

题目3: JSONP的原理是什么?

1. 定义一个数据处理函数
2. 网页通过添加一个script标签，向服务器请求ＪＳＯＮ数据．（src的地址最后加一个callback=appendHtml函数）
3. 服务器收到请求后，将数据放在一个指定函数名中，在把数据传回来。appendHtml(data)
4. appenHtml(data)会放到script标签解析作为js执行。此时会调用appendHtml函数，将data作为参数执行。

前端代码演示
　　<div class="container">
        <ul class="news">
            <li>第11日前瞻：中国冲击4金 博尔特再战</li>
            <li>男双力争会师决赛</li>
            <li>女排将死磕巴西！</li>
        </ul>
        <button class="change">换一组</button>
    </div>

$('.change').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 html = ";
    for(var i = 0; i < news.length ; i++){
        html += '<li>' + news[i] + '</li>';
    }
    $('.news').innerHTML = html;
};

function $(id){
    return document.querySelector(id);
};

服务器代码
app.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 cb = req.query.callback;
    if(cb){
        res.send( cb +"(" + JSON.stringify(data) + ")");
    } else {
        res.send(data);
    }
});

题目4:　CORS是什么？

CORS全称"跨域资源共享"(Cross-origin resource sharing)
它允许浏览器向跨源服务器，发送XMLHttpRequest请求，从而克服AJAX只能同源使用的限制。

实现方式

• 当你使用XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给给该请求加一个请求头：Origin, 后台进行一系列处理，如果确定接受请求则在返回结果中加入响应头：Access-Control-Allow-Origin;浏览器会判断响应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到数据，如果不包含浏览器响应头直接驳回，这是我们也就拿不到数据。CORS的表象和同源ajax请求没什么区别，代码完全一样。

前端代码
　 <div class="container">
        <ul class="news">
            <li>第11日前瞻：中国冲击4金 博尔特再战</li>
            <li>男双力争会师决赛</li>
            <li>女排将死磕巴西！</li>
        </ul>
        <button class="change">换一组</button>
    </div>

$('.change').addEventListener('click', function(){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status === 200 || xhr.status === 304){
               appendHtml(JSON.parse(xhr.responseText));             
            };
        };
    };
    xhr.open('/get', 'http://localhost:8080/getNews?', true);
    xhr.send();
});

function appendHtml (news) {
    var html = ";
    for(var i = 0; i < news.length ; i++){
        html += '<li>' + news[i] + '</li>';
    }
    $('.news').innerHTML = html;
};

function $(id){
    return document.querySelector(id);
};

服务器代码
app.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);
    };
    
    //res.header('Access-Control-Allow-Origin' , '/getNews');
    res.header('Access-Control-Allow-Origin' , '*');
    res.send();
});

题目5： 根据视频里的讲解演示三种以上跨域的解决方式

最先配置hosts

linux 在/etc/hosts

１．JSONP

1.定义一个数据处理函数appendHtml
2.网页通过添加一个script标签，向服务器请求ＪＳＯＮ数据．（src的地址最后加一个callack=appendHtml）
3.服务器收到请求后，将数据放在一个指定函数名中，在把数据传回来。appendHtml(data)
4.appenHtml(data)会放到script标签解析作为js执行。此时会调用appendHtml函数，将data作为参数执行。

代码图 JS
深度截图20170726222346.png

2. CORS
   原理

当你使用XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给给该请求加一个请求头：Origin, 后台进行一系列处理，如果确定接受请求则在返回结果中加入响应头：Access-Control-Allow-Origin;浏览器会判断响应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到数据，如果不包含浏览器响应头直接驳回，这是我们也就拿不到数据。CORS的表象和同源ajax请求没什么区别，代码完全一样。

代码图
深度截图20170726222705.png 深度截图20170726222718.png

３．降域

深度截图20170726225010.png

４．postMessage

深度截图20170726225604.png