题目1： 什么是同源策略
浏览器出于安全性能的考虑，只允许与同源接口进行数据传递，不同源的客户端本在没有明确授权的情况下，不能读写对方的资源。
同源指的是：
- 同协议：如http,https,file
- 同域名：第一个 // 之间 /，就是网站的域名。
- 同端口：http://jirengu.com:80/ 80就是端口号
题目2： 什么是跨域？跨域有几种实现形式
不同源的网站之前相互传递数据
跨域的实现形式：
- JSONP
- CORS
- 降域
- postMessage
题目3： JSONP 的原理是什么
JSONP的原理
利用<script src="xxx">发出get请求，然后浏览器对于这个src=''xxx'' 并不会监视，所以，我们就可以去发送请求，请求拿到的数据会被当做JS文件来运行，这个时候，对方只需要将所需要的数据用浏览器也支持，JS也能支持的语言格式传递，我们就能获得相应数据，而JSON语言是既符合这两个特点，使用起来也方便，所以叫JSONP.
JSONP实现的步骤
- 首先要定义好回调函数。
- 发出src的请求，然后，前端和别的网站的后端需要约定好 查询参数，比如都叫callback=showme
-
后端接收请求，也制定好了callback要传递的回去的数据，并且，要将前端的函数名字一并传递过去。因为，如果没有传递过去，前端的js可能并不能正常运行。
例如：
router.js
上述图中outseacher就是 callback的值，也就是前端的函数名。
4 . 前端拿到数据，按照事先制定好的函数，处理数据。
4.CORS是什么
cors是可以理解为加强版的Ajax。
既然Ajax不错，用起来也方便，我们就可以制定在双方都同意的情况下，允许跨域来传递数据。
Ajax运用XMLHttpRuquest的时候，服务器在请求的头部加了一个origin.
如果这个网站同意来自不同源的请求的时候，可以在回应的头部写上，
Access-Control-Allow-Origin
cors
例如这样，在回应信息里面加上'Access-Control-Allow-Origin' 就可以允许别人来获得信息了，当然，也可以指定只接受来自某个网站的请求，'*'代表任意。
5.用三种以上不同的方式来演示跨域过程。
1 . JSONP
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>成绩查询</title>
<style type="text/css">
button {
color:red;
border:1px solid red;
display:inline-block;
padding:10px 10px 5px 5px;
}
</style>
</head>
<input type="text" name="haha">
<div class="grade"></div>
<button>查询</button>
<script>
var $=function(x){
return document.querySelector(x)
}
$('button').addEventListener('click',function(){
var script=document.createElement('script')
script.src='http://sys521.com:8080/seachgrade?callback=seach'
document.head.appendChild(script)
document.head.removeChild(script)
})
function seach(username){
var arr=[]
for (key in username){
arr.push(key)
}
console.log(arr)
var b=arr.indexOf($('input').value)
if(b===-1){
return $('.grade').innerText= $('input').value+'是谁'
}else{
return $('.grade').innerText=username[arr[b]]
}
}
</script>
</body>
</html>
mock sever
router.get('/seachgrade',function(req,res){
var grade={'小明':100,'小刚':98,'小红':97}
var outseacher= req.query.callback;
if(outseacher){
res.send(outseacher+'('+JSON.stringify(grade)+')')
}else{
res.send(grade)
}
})
JSONP效果演示
- CORS
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>输入验证码</title>
<style>
.getcode,input {
display:inline-block;
}
.getcode{
border:1px solid;
word-spacing: 4px;
}
</style>
</head>
<body>
<span>请输入验证码：</span>
<input type="text">
<span>验证码</span>
<div class="getcode"></div>
<button>提交</button>
<script>
var input=document.querySelector('input')
var getcode=document.querySelector('.getcode')
var btn=document.querySelector('button')
input.addEventListener('focus',function(){
var xhr=new XMLHttpRequest()
xhr.onreadystatechange=function(){
if(xhr.readyState===4 && (xhr.status===200 || xhr.status === 304)){
var result=JSON.parse(xhr.responseText)
getcode.innerText=result.join('')
}else{
getcode.innerText='断网了'
}
}
xhr.open('get','http://sys521.com:8080/getCode',true)
xhr.send()
})
btn.onclick=function(){
if(input.value===getcode.innerText){
alert('答对了')
}else{
alert('error')
}
}
</script>
</body>
</html>
mock sever
app.get('/getCode',function(req,res){
var a=[]
var b=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
for(var i=0;i<4;i++){
var c=Math.floor(Math.random()*15)
a.push(b[c])
}
res.header('Access-Control-Allow-Origin','*')
res.send(JSON.stringify(a))
})
CORS
3 .降域
代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="ct">
<input class="aa" type="text" placeholder="a.lpf123.com/a.html">
</div>
<iframe src="http://b.lpf123.com:8080/b.html">
</iframe>
<script>
document.querySelector('.aa').addEventListener('input', function(){
window.frames[0].document.querySelector('input').value=this.value
})
document.domain= 'lpf123.com'
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" placeholder="b.lpf123.com">
<script>
document.querySelector('input').addEventListener('input', function(){
window.parent.document.querySelector('input').value = this.value;
})
document.domain ='lpf123.com'
</script>
</body>
</html>
降域
