題目1： 什么是同源策略
瀏覽器出于安全性能的考慮，只允許與同源接口進(jìn)行數(shù)據(jù)傳遞，不同源的客戶端本在沒(méi)有明確授權(quán)的情況下，不能讀寫對(duì)方的資源。
同源指的是：
- 同協(xié)議：如http,https,file
- 同域名：第一個(gè) // 之間 /，就是網(wǎng)站的域名。
- 同端口：http://jirengu.com:80/ 80就是端口號(hào)
題目2： 什么是跨域？跨域有幾種實(shí)現(xiàn)形式
不同源的網(wǎng)站之前相互傳遞數(shù)據(jù)
跨域的實(shí)現(xiàn)形式：
- JSONP
- CORS
- 降域
- postMessage
題目3： JSONP 的原理是什么
JSONP的原理
利用<script src="xxx">發(fā)出get請(qǐng)求，然后瀏覽器對(duì)于這個(gè)src=''xxx'' 并不會(huì)監(jiān)視，所以，我們就可以去發(fā)送請(qǐng)求，請(qǐng)求拿到的數(shù)據(jù)會(huì)被當(dāng)做JS文件來(lái)運(yùn)行，這個(gè)時(shí)候，對(duì)方只需要將所需要的數(shù)據(jù)用瀏覽器也支持，JS也能支持的語(yǔ)言格式傳遞，我們就能獲得相應(yīng)數(shù)據(jù)，而JSON語(yǔ)言是既符合這兩個(gè)特點(diǎn)，使用起來(lái)也方便，所以叫JSONP.
JSONP實(shí)現(xiàn)的步驟
- 首先要定義好回調(diào)函數(shù)。
- 發(fā)出src的請(qǐng)求，然后，前端和別的網(wǎng)站的后端需要約定好 查詢參數(shù)，比如都叫callback=showme
-
后端接收請(qǐng)求，也制定好了callback要傳遞的回去的數(shù)據(jù)，并且，要將前端的函數(shù)名字一并傳遞過(guò)去。因?yàn)?，如果沒(méi)有傳遞過(guò)去，前端的js可能并不能正常運(yùn)行。
例如：
router.js
上述圖中outseacher就是 callback的值，也就是前端的函數(shù)名。
4 . 前端拿到數(shù)據(jù)，按照事先制定好的函數(shù)，處理數(shù)據(jù)。
4.CORS是什么
cors是可以理解為加強(qiáng)版的Ajax。
既然Ajax不錯(cuò)，用起來(lái)也方便，我們就可以制定在雙方都同意的情況下，允許跨域來(lái)傳遞數(shù)據(jù)。
Ajax運(yùn)用XMLHttpRuquest的時(shí)候，服務(wù)器在請(qǐng)求的頭部加了一個(gè)origin.
如果這個(gè)網(wǎng)站同意來(lái)自不同源的請(qǐng)求的時(shí)候，可以在回應(yīng)的頭部寫上，
Access-Control-Allow-Origin
例如這樣，在回應(yīng)信息里面加上'Access-Control-Allow-Origin' 就可以允許別人來(lái)獲得信息了，當(dāng)然，也可以指定只接受來(lái)自某個(gè)網(wǎng)站的請(qǐng)求，'*'代表任意。
5.用三種以上不同的方式來(lái)演示跨域過(guò)程。
1 . JSONP
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>成績(jī)查詢</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+'是誰(shuí)'
}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)
}
})
- CORS
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>輸入驗(yàn)證碼</title>
<style>
.getcode,input {
display:inline-block;
}
.getcode{
border:1px solid;
word-spacing: 4px;
}
</style>
</head>
<body>
<span>請(qǐng)輸入驗(yàn)證碼：</span>
<input type="text">
<span>驗(yàn)證碼</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='斷網(wǎng)了'
}
}
xhr.open('get','http://sys521.com:8080/getCode',true)
xhr.send()
})
btn.onclick=function(){
if(input.value===getcode.innerText){
alert('答對(duì)了')
}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))
})
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>
