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>
【个人总结，如有错漏，欢迎指出】
：>
