同源策略
1 . 含義
1995年，同源策略由netscape公司引入瀏覽器，目前，所有瀏覽器都實行這個策略。同源的含義是指三個相同：
- 協議相同
- 域名相同
- 端口相同
-
目的
同源策略的目的是為了保護用戶信息的安全，防止惡意網站竊取數據。
設想這樣一種情況：a網站是一家銀行，用戶登錄以后，又去瀏覽其他的網站，如果其他的網站可以讀取a網站的cookie，會發生什么？
很顯然，如果cookie包含隱私（比如存款金額），這些信息就會泄露、更可怕的是，cookie往往用來保存用戶的登錄狀態，如果用戶沒有退出登錄，其他網站就可以冒充用戶，為所欲為。因為瀏覽器同時還規定，提交表單不受同源策略的限制。 -
限制范圍
三種行為受到限制：
- cookie/localstorage/indexdb無法讀取
- dom無法獲得
- ajax請求不能發送
跨域及實現形式
含義
跨域就是突破同源策略的限制，使一個域名的網頁可以請求另一個域名的資源。
實現方式
- jsonp:步驟：
- 定義數據處理函數_fun
- 創建script標簽，src的地址執行后端接口，最后加個參數callback=_fun
- 服務端在收到請求后，解析參數計算返回數據，輸出fun(data)字符串
- fun(data)會放到script標簽作為js執行，此時會調用fun函數，將data作為參數。
代碼：
html:
<div class='container'>
<ul class='news'>
<li></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>';
}
console.log(html);
$('.news').innerHtml=html
}
后臺：
var cb=req,query,callback;
if(cb){
res.send(cb='('+JSON.stringify(data+'))')
}else{
res.send(data);
}
- cros
在服務器端加上res.header("Access-control-Allow-Origin","http://a.jirengu,com:8080")
代碼：
html中
<div class='container'>
<ul class='news'>
<li></li>
<li></li>
<li></li>
</ul>
<button class='change'>第一組</button>
</div>
前臺：
$('.change').addEventListener('click',function(){
var xhr=new XMLHttpRequest();
xhr.open('get','http://jrg,com:8080',true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr,status===200){
appendHtml( JSON.parse(xhr.responseText))
}
}
})
function appendHtml(news){
var html='';
for(var i=0;i<news.length;i++){
html+='<li>'+news[i]+'</li>'
}
console.log(html);
$('.news').innerHtml=html;
}
后臺：
app.get('/getNews',function(req,res){
var news=[.....]
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('Acess-Control-Allow-Origin','http://a.jrg.com:8080');
res,send(data);
})
- 降域
僅限于主域名相同子域名不同的兩個頁面的交互，可以通過設置document.damain屬性來使來年各個頁面個的域名相同，從而避開同源策略，實現跨域。。 - postMessage
兩個窗口能夠通信的前提是一個窗口以iframe的形式存在于另一個窗口，或者一個窗口是通過另一個窗口通過window.open()或者超鏈接的形式打開的。
理解就是a向b發送消息，如果b接收就監聽message事件，然后b向a發送消息，如果接收a就監聽message事件
示例代碼：
a.html中：
<input type='text' placeholder='http:a.jirengu.com:8080/a.html'>
<iframe src='http://localhost:8080/b.html' frameborder='0'></iframe>
<script>
$(.main input).addEventListener('input',function(){
console.log(this.value)
window.frames[0].postMessage(this.value.'*');
})
window.addEventListener('message',function(e){
$('.main input').value=e.data
console.log(e.data)
})
<script>
b.html中：
<input id='input' type='text' placeholder='http://b.jirengu.com:8080/b.html'>
<script>
$('#input').addEventListener('input',function(){
window.parent.postMessage(this.value,'*')
})
window.addEventListener('message',function(e){
$('#input‘).value=e.data
console.log(e.data)
})
<script>
JSONP的原理
通過<script>標簽向服務器發送請求，將前端方法作為參數傳遞到服務器，服務器接收到請求后將JSON數據作為該方法的參數，返回javascript文本前端方法就可以拿到數據。
由于使用的是script標簽的src屬性，所以只支持get方法
cors
cors定義一種跨域訪問機制，可以讓ajax實現跨域訪問。cors允許一個域上的網絡應用向另一個域提交跨域ajax請求實現此功能非常簡單，只需向服務器發送一個響應頭即可。
`header('Access-Control-Allow-Origin:http://www.test2.com')
