什么是同源策略
-
什么是同源
簡單點兒理解字面的意思就是“同一源頭”這也就意味著兩邊：- 協(xié)議必須要一樣婴洼，要么都是http，要么都是https等等撼嗓，其他的協(xié)議如file柬采，ssh....都是一個道理，也都要一樣才行
- 第二個就是域名要一樣且警，要注意到http://www.a.com與http://a.com是兩個不同的網(wǎng)站
- 端口也要一樣才行粉捻。
要注意到http://www.a.com 與 http://www.a.com:8080 不是同源的因為前者的端口號是80端口
需要留心的是:對于當(dāng)前頁面來說頁面存放的 JS 文件的域不重要振湾，重要的是加載該 JS 頁面所在什么域
-
簡單說下杀迹，為什么要有“同源策略”
本來的只要服務(wù)器愿意提供接口，不同源的雙方是可以進(jìn)行通信的押搪，但是瀏覽器出于安全方面的考慮续语，只允許與本域下的接口交互。不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方的資源帅容。
什么是跨域？跨域有幾種實現(xiàn)形式
- 什么是跨域
允許不同域的接口，進(jìn)行通信交互就叫做跨域啦 - 跨域有幾種實現(xiàn)形式
- JSONP
- CORS 兼容問題要考慮
- 降域
- postMessage
JSONP 的原理是什么
后端程序員開放一個數(shù)據(jù)接口，前端利用<script>標(biāo)簽引入接口后佣渴，就可以向后端發(fā)送請求了突硝，發(fā)送請求的時候傳入前端頁面處理數(shù)據(jù)的函數(shù)（callback=funname）羞酗，后端接收到前端的請求之后撤师，把數(shù)據(jù)返回給前端頁面，前端接收到返回數(shù)據(jù)后用已經(jīng)寫好的方法展現(xiàn)處理數(shù)據(jù)
例子：
//這個端口一般是用代碼拼裝起來的
<script src="http://a.com/gerData?callback=showData"></script>
//前端的話 寫一個同名的處理函數(shù)
function showData (data){
do something
}
CORS是什么
cors(Cross-Origin Resourse Sharing跨域源資源共享)利用瀏覽器對于不同源的請求漱贱，會在請求頁面的源信息添加一個origin等于當(dāng)前請求頁面的源信息。
在服務(wù)器端夭委，返回數(shù)據(jù)的時候幅狮，設(shè)置響應(yīng)頭的Access-Control-Allow-Origin等于對應(yīng)的頁面源信息，瀏覽器發(fā)現(xiàn)請求頭的origin和服務(wù)器返回的響應(yīng)頭中的值對應(yīng)上了株灸，就發(fā)送了數(shù)據(jù)崇摄，如果不匹配，請求就會被駁回蚂且，沒有得到響應(yīng)的數(shù)據(jù)配猫。
這個方法只能在IE10以上使用，主要的變動是在后端杏死，因為語言語法的問題泵肄，響應(yīng)頭的寫法各有不同。
app.get('路徑', function(req, res) {
//對響應(yīng)的頭部信息進(jìn)行設(shè)置 如果第二個參數(shù)為*淑翼，就代表誰都可以拿到返回數(shù)據(jù)啦
res.header('Access-Control-Allow-Origin','http://a.com');
res.send(resData);
});
根據(jù)視頻里的講解演示三種以上跨域的解決方式 腐巢，寫成博客
三種跨域方式的展示
- 第一種JSONP形式
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jsonp的跨域方法-楊晨健</title>
</head>
<body>
<div class="container">
<ul class="news">
<li>NBA-8:00視頻直播勇士vs熱火 9:00火箭出戰(zhàn)</li>
<li>魯媒評CBA本土一哥之爭：易帝退位 丁神登基</li>
<li>四人梅開二度上港熱身10-0 遼足簽兩澳洲國腳</li>
</ul>
<button class="change">換一組</button>
</div>
<script>
$('.change').addEventListener('click', function(){
var script = document.createElement('script');
script.src = 'http://b.aaa.com:8080/getNews?callback=appendHtml';//跨域的地址其中callback很重要
document.head.appendChild(script);//添加到頁面的頭部標(biāo)簽里面
document.head.removeChild(script);//用完就刪，保持整潔
})
//對后端給到的數(shù)據(jù)進(jìn)行一個前端處理 方法名字要和回調(diào)函數(shù)的名字一樣才行
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);
}
/* ---------------------------router.js---------------------- */
app.get('/getNews', function(req, res){
var news = [
"第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
"正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
"女排將死磕巴西玄括！郎平安排男陪練模仿對方核心",
"沒有中國選手和巨星的110米欄 我們還看嗎冯丙？",
"中英上演奧運(yùn)金牌大戰(zhàn)",
"博彩賠率挺中國奪回第二紐約時報：中國因?qū)κ址幎鴣G失的獎牌最多",
"最“出柜”奧運(yù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);
}
})
</script>
</body>
</html>
- 第二種方式 cros
//前端的話 就像ajax請求那么寫就好 沒有太大變化，主要是后端發(fā)生的改變
<!DOCTYPE html>
<html lang=“zh-cn”>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<ul class="news">
<li>NBA-8:00視頻直播勇士vs熱火 9:00火箭出戰(zhàn)</li>
<li>魯媒評CBA本土一哥之爭：易帝退位 丁神登基</li>
<li>四人梅開二度上港熱身10-0 遼足簽兩澳洲國腳</li>
</ul>
<button class="change">換一組</button>
</div>
<script>
$('.change').addEventListener('click',function(){
var xhr = new XMLHttpRequest();
xhr.open('get','http://b.aaa.com:8080/getNews',true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
appendHtml(JSON.parse(xhr.responseText));
}
}
window.xhr = xhr;
})
function appendHtml(news){
var html = '';
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>';
}
console.log(html);
$('.news').innerHTML = html;
}
function $(id){
return document.querySelector(id);
}
/*------------------------router.js----------------------------*/
app.get('/getNews', function(req, res){
var news = [
"第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
"正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
"女排將死磕巴西胃惜！郎平安排男陪練模仿對方核心",
"沒有中國選手和巨星的110米欄 我們還看嗎泞莉？",
"中英上演奧運(yùn)金牌大戰(zhàn)",
"博彩賠率挺中國奪回第二紐約時報：中國因?qū)κ址幎鴣G失的獎牌最多",
"最“出柜”奧運(yù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-Orgin","b.aaa.com:8080”);//這句話很重要是cros跨域方法的重要支撐船殉，如果第二個參數(shù)填寫*的話 那就是如何域名訪問鲫趁，后端都給數(shù)據(jù)，同時也要意識到這個方法的話只能在ie10以上的瀏覽器中使用
res.send(data);
})
</script>
</body>
</html>
- 通過降域的方式來實現(xiàn)跨域
//這種方法局限性很大利虫，相對來說比較小眾挨厚，跨域的雙方的主域名必須一致才可以
/-------------------a.yangchenjian.com---------------------------/
<!DOCTYPE html>
<html lang=“zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
省略。糠惫。疫剃。
</style>
</head>
<body>
<div class="ct">
<h1>使用降域?qū)崿F(xiàn)跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.yangchenjian.com:8080/a.html">
</div>
<iframe src="http://b.yangchenjian.com:8080/b.html" frameborder="0"></iframe>
</div>
<script>
document.querySelector('.main input').addEventListener('input', function() {
console.log(this.value);//打印出監(jiān)聽a的輸入內(nèi)容
window.frames[0].document.querySelector('input').value = this.value;//選中iframe把a(bǔ)的輸入內(nèi)容給b
})
document.domain = "yangchenjian.com" //這個是非常重要的一步將2級域名降成主域名
</script>
</body>
</html>
/-------------------b.yangchenjian.com---------------------------/
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
省略。硼讽。巢价。。
</style>
</head>
<body>
<input id="input" type="text" placeholder="http://b.yangchenjian.com:8080/b.html">
<script>
document.querySelector('#input').addEventListener('input', function() {
console.log(this.value);
window.parent.document.querySelector('input').value = this.value;//把自己的值也傳遞給自己的父窗口
})
document.domain = 'yangchenjian.com';
</script>
</body>
</html>
