1尘颓、什么是同源策略?
- 瀏覽器出于安全方面的考慮，只允許與本域下的接口交互主胧。不同源的客戶端腳本在沒有明確授權(quán)的情況下叭首，不能讀寫對(duì)方的資源。
- 本域指的是：
- 同協(xié)議：如都是http或者h(yuǎn)ttps踪栋、ftp
- 同域名：如都是http://jirengu.com/a 和(http://jirengu.com/b
- 同端口：如都是80端口
http://jirengu.com:8080/a/b.js)和http://jirengu.com:8080/index.php
- 不同源的例子：
- http://www.baidu.com和https://www.baidu.com（協(xié)議不同）
- http://www.baidu.com和http://www.cdn.baidu.com（域名不同）
- http://www.baidu.com和http://www.baidu.com:8080（端口不同）
需要注意的是: 對(duì)于當(dāng)前頁面來說頁面存放的 JS 文件的域不重要焙格，重要的是加載該 JS 頁面所在什么域
2、什么是跨域夷都？跨域有幾種實(shí)現(xiàn)形式眷唉？
- 跨域是不同源之間的數(shù)據(jù)交互
- 四種方式：
- JSONP
- CORS：跨域資源共享（Cross-Origin Resource Sharing）
- 降域
- postMessage()
3、JSONP 的原理是什么
域名網(wǎng)頁1通過url發(fā)送一個(gè)callback 帶有形參的函數(shù)名到域名網(wǎng)頁2下，另外域名網(wǎng)頁2把數(shù)據(jù)和獲取的函數(shù)名包裝成一個(gè)函數(shù)的調(diào)用冬阳，把整個(gè)函數(shù)調(diào)用的形式 callback("獲取的數(shù)據(jù)")一并發(fā)送回域名網(wǎng)頁1蛤虐，域名網(wǎng)頁1通過響應(yīng)的 callback("獲取的數(shù)據(jù)") 執(zhí)行這個(gè)帶有形參的函數(shù)，獲取的數(shù)據(jù)就是跨域?qū)崿F(xiàn)的摩泪，叫JSONP
// 網(wǎng)頁1：http://localhost:8080/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP</title>
</head>
<body>
<ul class="lists"></ul>
<button class="btn">換一組</button>
<script type="text/javascript" src='jquery/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
//var lists = $('.lists')
//var btn = $('.btn')
var $lists = $('.lists')
var $btn = $('.btn')
$btn.on('click',function(){
var $script = $('<script>' + '</scr\ipt>')
$script.attr('src','http://book.kuma.com:8080/getNew?callback=appendHtml')
$('head').append($script)
//$('head').remove($script) 這個(gè)有問題
$('head script').remove()
})
/*
btn.addEventListener('click',function(){
var script = document.createElement('script')
script.src = 'http://book.kuma.com:8080/getNew?callback=appendHtml'
document.head.appendChild(script)
document.head.removeChild(script)
})
*/
function appendHtml(data){
var htmls = ''
for (var i = 0; i < data.length; i++) {
var li = '<li>' + data[i] + '</li>'
htmls += li
}
//lists.innerHTML = htmls
$lists.html(htmls)
//$lists.append(htmls)
}
/*
function $(cls){
return document.querySelector(cls)
}
*/
</script>
</body>
</html>
// 網(wǎng)頁2：http://book.kuma.com:8080/getNew?callback=appendHtml
app.get('/getNew',function(req,res){
var cb = req.query.callback
var news = [
'團(tuán)中央給單身找伴侶 幫得了你嗎',
'這個(gè)貪官行賄3億 為何只判了4年',
'夫婦親熱遭偷拍 被平臺(tái)現(xiàn)場(chǎng)直播',
'熊黛林現(xiàn)身"撈金" 拒談過往情事',
'汪東城曬孫悟空造型照 畫面穿越',
'鄒市明生日會(huì) 與冉瑩穎恩愛互動(dòng)',
'馬蘇獲獎(jiǎng)后臺(tái)畫風(fēng)突變 搞怪自拍',
'美泄密士兵服刑7年:獄中想變性',
'英大選黨派競(jìng)選 宣言"脫歐"為主',
'特朗普發(fā)推文反駁指控:政治迫害',
'韓"薩德"紛爭(zhēng)再起 撤走可能性小'
]
var arr = []
for (var i = 0; i < 3; i++) {
var data = parseInt(Math.random()*news.length)
arr.push(news[data])
//把取出的這條新聞在原json數(shù)組中刪除笆焰，防止再次取到
news.splice(data,1)
}
res.send(cb + '(' + JSON.stringify(arr) + ')')
})
4、CORS是什么
CORS（Cross-Origin Resource Sharing见坑，跨域資源共享）嚷掠，定義了在必須訪問跨域資源時(shí)，使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通荞驴，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功還是失敗不皆。在發(fā)送請(qǐng)求時(shí)，需要額外附一個(gè) Origin 頭部熊楼，其中包含請(qǐng)求頁面的原信息（協(xié)議霹娄、域名、端口）鲫骗，服務(wù)器根據(jù)這個(gè)頭部信息決定是否給予響應(yīng)犬耻。如果服務(wù)器認(rèn)為這個(gè)請(qǐng)求可以接受，就在 Access-Control-Allow-Origin 頭部中回發(fā)相同的源信息（如果是公共資源执泰，可以回發(fā) *）枕磁，如果沒有這個(gè)頭部，或者有這個(gè)頭部但源信息不匹配术吝，瀏覽器就會(huì)駁回請(qǐng)求计济。
