题目1： 什么是同源策略
同源策略(Same origin Policy)：浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本（如：JavaScript）在没有明确授权的情况下，不能读写对方的资源。
本域指的是？
同协议：如都是http或者https
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是80端口
如：
http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)
不同源的例子：
http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)
**需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域
题目2： 什么是跨域？跨域有几种实现形式?
跨域是指突破同源策略的限制，访问不同域下的数据，如
网络协议不同，如http协议访问https协议。
端口不同，如80端口访问8080端口。
域名不同，如qianduanblog.com访问baidu.com。
子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。
实现方式：
- JSONP
- CORS
- 降域
- postMessage
题目3： JSONP 的原理是什么?
html中script标签可以引入其他域下的js，比如引入线上的jquery库。利用这个特性，可实现跨域访问接口。需要后端支持
echo $cb . '&&' . $cb . '(' . json_encode($ret) . ')';
定义数据处理函数_fun
创建script标签，src的地址执行后端接口，最后用&加个参数callback=_fun
服务端在收到请求后，解析参数，计算返还数据，输出 fun(data) 字符串。
fun(data)会放到script标签做为js执行。此时会调用fun函数，将data做为参数
<script src="http://weather.com.cn?city=shenzhen&callback=showWeather"></script>
题目4： CORS是什么？
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
题目5： 根据视频里的讲解演示三种以上跨域的解决方式 ，写成博客
- 使用JSONP,CORS进行跨域请求
使用JSONP进行跨域请求，原理更加简单，就是请求script，然后服务器将信息用script语言进行包裹，发送回来，浏览器运行script，解析信息。这样兼容性更好，但是需要服务器配合，将发送的信息进行处理，同时，也不安全，毕竟发送回来的脚本直接运行，没有任何判定。
使用CORS进行跨域请求，就是ajax的升级版，对于前端，没有任何新增工作量，主要是后端需要对跨域请求的ajax进行判断。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
width: 900px;
margin:90px auto;
padding: 10px;
border: 1px solid #aaa;
box-shadow: 2px 2px 3px #aaa;
}
.container > .news{
list-style: none;
}
.container > .news > li{
margin: 10px auto;
width: 860px;
font-size: 24px;
line-height: 30px;
border: 1px solid #999;
border-radius: 3px;
}
button{
margin-left: 20px ;
width: 80px;
height: 20px;
background-color: orange;
border-radius: 4px;
border: none;
font-size: 16px;
text-align: center;
color: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="container">
<ul class="news">
<li>第11日前瞻：中国冲击4金 博尔特再战</li>
<li>男双力争会师决战</li>
<li>女排死磕巴西</li>
</ul>
<button class="change">换一组</button>
</div>
<script type="text/javascript">
var change = document.querySelector('.change')
change.addEventListener('click',function(){
var script = document.createElement('script')
script.src = 'http://localhost:8080/getNews?function=appendChild';//使用JSONP进行跨域请求
document.head.appendChild(script);
$.get('http://api.jirengu.com/fm/getSong.php',{channel: 'public_aaa_bbb'});//使用CORS进行跨域请求
.done(function(song){
console.log(song)
});
})
function appendChild(news){
var html = '';
for( var i = 0;i<news.length;i++){
html+='<li>'+news[i]+'</li>'
}
console.log(html);
$('.news').innerHTML = html;
}
</script>
</body>
</html>
- 使用postMessage进行跨域请求
使用postMessage是在两个页面之间进行信息交流，而不是前端和后端的交流。原理就是在页面a中iframe标签引入页面b，然后通过postMessage给页面b发送消息，同时接受页面b的消息，从而实现两个页面之间的信息交流。
页面a中引入iframe，URL为页面b地址：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨域--postMessage</title>
<style type="text/css">
iframe{
margin: 0;
padding: 0;
}
input{
margin-left: 10px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="ct">
<h1>使用postMessage实现跨域</h1>
<div class="main">
<input type="text" placeholder="http://localhost:8080/a.html">
</div>
//iframe标签插入页面b
<iframe src="http://localhost:8080/b.html" frameborder="0"></iframe>
</div>
<script type="text/javascript">
$('.main input').addEventListener('input',function(){
console.log(this.value);
window.frames[0].postMessage(this.value,'*');//用postMessage向页面b发送message
})
window.addEventListener('message',function(e){//监听页面b通过postMessage发送过来的message
$('.main input').value = e.data;
console.log(e.data)
})
function $(id){
return document.querySelector(id);
}
</script>
</body>
</html>
页面b：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨域--postMessage</title>
</head>
<body>
<input id="input" type="text" placeholder="http://localhost:8080/b.html">
<script type="text/javascript">
$('#input').addEventListener('input',function(){
window.parent.postMessage(this.value,'*')用postMessage向页面a发送message
})
window.addEventListener('message',function(e){//监听页面a通过postMessage发送过来的message
$('#input').value = e.data;
console.log(e.data)
})
function $(id){
return document.querySelector(id)
}
</script>
</body>
</html>
- 升级版：使用postMessage 知识点解决 ajax中POST跨域问题
原理也很简单，假如我们的域名abc.com下的abc.html页面需要发ajax请求(跨域，域名为def.com)下，那么我们还是先跨页面文档的形式，和上面一样，我们可以现在def.com下 建立一个页面，比如叫def.html. 那么我们现在还是在 abc.html 页面嵌入一个隐藏域iframe src路径指向def.com域下def,html页面。过程还是和跨文档类似，只是现在在def.html页面中 在window.onmessage 事件内写ajax请求即可。
网友评论