題目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>
降域
