同源策略
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')
