同源策略（Same origin Policy）
瀏覽器出于安全方面考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方的資源。
本域指的是？
- 同協(xié)議：如都是http或這https、file、ssh、mailto、tel
- 同端口：如都是http://jirengu.com/a 和 http://jirengu.com/b
- 同域名：如都是80端口
不同源的列子
- 協(xié)議不同 > 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: 什么是跨域？跨域有幾種實現(xiàn)形式
跨域就是允許不同的域進行交互。
４種實現(xiàn)形式:
- JSONP
- CORS
- 降域
- postMessage
題目3: JSONP的原理是什么?
- 定義一個數(shù)據處理函數(shù)
- 網頁通過添加一個script標簽，向服務器請求ＪＳＯＮ數(shù)據．（src的地址最后加一個callback=appendHtml函數(shù)）
- 服務器收到請求后，將數(shù)據放在一個指定函數(shù)名中，在把數(shù)據傳回來。appendHtml(data)
- appenHtml(data)會放到script標簽解析作為js執(zhí)行。此時會調用appendHtml函數(shù)，將data作為參數(shù)執(zhí)行。
前端代碼演示
<div class="container">
<ul class="news">
<li>第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)</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金 博爾特再戰(zhàn)200米羽球",
"正直播柴飚/洪煒出站 男雙力爭會師決賽",
"女排將死磕巴西！郎平安排那陪練模仿對方核心",
"沒有中國選手和巨星的110米欄 我們還看嗎？",
"中英上演奧運金牌大戰(zhàn)",
"博彩賠率挺中國奪回第二紐約時報：中國因為對手服用禁藥而丟失的獎牌最多",
"最\“出柜\”奧運？ 同性之愛閃耀里約",
"下跪拜謝與洪荒之力一樣 都是真情流露"
];
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)
它允許瀏覽器向跨源服務器，發(fā)送XMLHttpRequest請求，從而克服AJAX只能同源使用的限制。
實現(xiàn)方式
- 當你使用XMLHttpRequest 發(fā)送請求時，瀏覽器發(fā)現(xiàn)該請求不符合同源策略，會給給該請求加一個請求頭：Origin, 后臺進行一系列處理，如果確定接受請求則在返回結果中加入響應頭：Access-Control-Allow-Origin;瀏覽器會判斷響應頭中是否包含Origin的值，如果有則瀏覽器會處理響應，我們就可以拿到數(shù)據，如果不包含瀏覽器響應頭直接駁回，這是我們也就拿不到數(shù)據。CORS的表象和同源ajax請求沒什么區(qū)別，代碼完全一樣。
前端代碼
<div class="container">
<ul class="news">
<li>第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)</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金 博爾特再戰(zhàn)200米羽球",
"正直播柴飚/洪煒出站 男雙力爭會師決賽",
"女排將死磕巴西！郎平安排那陪練模仿對方核心",
"沒有中國選手和巨星的110米欄 我們還看嗎？",
"中英上演奧運金牌大戰(zhàn)",
"博彩賠率挺中國奪回第二紐約時報：中國因為對手服用禁藥而丟失的獎牌最多",
"最\“出柜\”奧運？ 同性之愛閃耀里約",
"下跪拜謝與洪荒之力一樣 都是真情流露"
];
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.定義一個數(shù)據處理函數(shù)appendHtml
2.網頁通過添加一個script標簽，向服務器請求ＪＳＯＮ數(shù)據．（src的地址最后加一個callack=appendHtml）
3.服務器收到請求后，將數(shù)據放在一個指定函數(shù)名中，在把數(shù)據傳回來。appendHtml(data)
4.appenHtml(data)會放到script標簽解析作為js執(zhí)行。此時會調用appendHtml函數(shù)，將data作為參數(shù)執(zhí)行。
代碼圖
JS
深度截圖20170726222346.png
- CORS
原理
當你使用XMLHttpRequest 發(fā)送請求時，瀏覽器發(fā)現(xiàn)該請求不符合同源策略，會給給該請求加一個請求頭：Origin, 后臺進行一系列處理，如果確定接受請求則在返回結果中加入響應頭：Access-Control-Allow-Origin;瀏覽器會判斷響應頭中是否包含Origin的值，如果有則瀏覽器會處理響應，我們就可以拿到數(shù)據，如果不包含瀏覽器響應頭直接駁回，這是我們也就拿不到數(shù)據。CORS的表象和同源ajax請求沒什么區(qū)別，代碼完全一樣。
代碼圖
深度截圖20170726222705.png
深度截圖20170726222718.png
３．降域
深度截圖20170726225010.png
４．postMessage
深度截圖20170726225604.png
