1.什么是同源策略?

同源是指协议、域名、端口都必须是是一致的，其中一种不一致即不同源。
浏览器出于安全考虑而定制的策略，只允许本域下的接口交互，不同源的客户端脚本在没有明确授权的情况下不能读写对方资源。

2.什么是跨域？跨域有几种实现形式?

跨域指允许不同域的接口进行交互

• JSONP ：利用src属性引入其他域下的js，实现跨域访问接口，需要后端支持。

• CORS：全称是跨域资源共享（ cross-origin-resource-shareing）IE10及以上支持

• 降域：只有同属于一个域名的二级域名才能够使用这种方式

• postMessage

3.JSONP 的原理是什么?

JSONP的原理是利用src属性引入其他域下的JS，需要后端返回数据是一个函数调用，处理后的数据作为函数的参数传入。

• 定义数据处理函数_fun
• 创建script标签，src的地址执行后端接口，最后加个参数callback=_fun
• 服务端在收到请求后，解析参数，计算返还数据，输出 fun(data) 字符串。
• fun(data)会放到script标签做为js执行。此时会调用fun函数，将data做为参数。

4.CORS是什么?

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。

5.演示三种以上跨域的解决方式?

JSONP

前端代码

$(`.change`).addeventListener('click',function(){
var script = document.createElement('script');
script.src = 'http://127.0.0.1/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;
}

function $(id){
    return document.querySelector(id);
}

后端代码

var cb = req.query.callback;//获取函数名
if(cb){
    res.send(cb +'('+JSON.stringify(data) + ')'); //拼装函数返回调用
}else{
    res.send(data);
}

CORS

前端代码

$('.change').addEventListener('click', function(){
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://b.jrg.com:8080/getNews', true);
xhr.send();

后端代码

res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");
res.send("Access-Control-Allow-Origin", "*");
res.send(data);

降域

 document.domain = 降域后域名

postMassage

a.html代码

<div class="ct">
<h1>使用postMessage实现跨域</h1>
<div class="main">
    <input type="text" placeholder="http://a.jrg.com:8080/a.html">
</div>
    <iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>
</div>
<script>
 //URL:http://a.jrg.com:8080/a.html
$('.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);
}
function $(id){
    return document.querySelector(id);
}

</script>

b.html代码

<script>

//URL:http://b.jrg.com:8080/b.html
$('#input').addEventListener('input', function(){
    window.parent.postMessage(this.value, '*');
})
window.addEventListener('message',function(e) {
        $('#input').value = e.data
    console.log(e.data);
});
function $(id){
    return document.querySelector(id);
}    
</script>

【个人总结，如有错漏，欢迎指出】
：>