同源策略（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: 什么是跨域？跨域有几种实现形式
跨域就是允许不同的域进行交互。
４种实现形式:
- JSONP
- CORS
- 降域
- postMessage
题目3: JSONP的原理是什么?
- 定义一个数据处理函数
- 网页通过添加一个script标签，向服务器请求ＪＳＯＮ数据．（src的地址最后加一个callback=appendHtml函数）
- 服务器收到请求后，将数据放在一个指定函数名中，在把数据传回来。appendHtml(data)
- 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
- CORS
原理
当你使用XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给给该请求加一个请求头：Origin, 后台进行一系列处理，如果确定接受请求则在返回结果中加入响应头：Access-Control-Allow-Origin;浏览器会判断响应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到数据，如果不包含浏览器响应头直接驳回，这是我们也就拿不到数据。CORS的表象和同源ajax请求没什么区别，代码完全一样。
代码图
深度截图20170726222705.png
深度截图20170726222718.png
３．降域
深度截图20170726225010.png
４．postMessage
深度截图20170726225604.png
