1. 什么是同源策略?
瀏覽器出于安全方面的考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方的資源。
同源的條件：
同協(xié)議：比如都是http或者https
同域名：比如都是http://xxx.com/a 和http://xxx.com/b（第一個/前面的是域名）
同端口：比如都是80端口
2. 什么是跨域？跨域有幾種實現(xiàn)形式
跨域就是越過同源策略的限制，在不同源的情況下之間交互。
實現(xiàn)形式有
- jsonp
- cors
- 降域
- postMessage
3. JSONP 的原理是什么
人們發(fā)現(xiàn)在頁面上通過url調(diào)用js文件時不受跨域的影響，所以通過創(chuàng)建script標簽，地址為后端的接口來跨域。jsonp需要傳遞以個callback參數(shù)給服務(wù)端，然后后端返回數(shù)據(jù)時會將這個callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)，完成跨域訪問。
<script src="http://domain/api?param1=a¶m2=b&callback=jsonp"></script>
<script>
function jsonp(data) {
console.log(data)
}
</script>
4. CORS是什么
CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing），是一種 ajax 跨域請求資源的方式，支持現(xiàn)代瀏覽器，IE支持10以上。 實現(xiàn)方式很簡單，當你使用 XMLHttpRequest 發(fā)送請求時，瀏覽器發(fā)現(xiàn)該請求不符合同源策略，會給該請求加一個請求頭：Origin，后臺進行一系列處理，如果確定接受請求則在返回結(jié)果中加入一個響應(yīng)頭：Access-Control-Allow-Origin; 瀏覽器判斷該相應(yīng)頭中是否包含 Origin 的值，如果有則瀏覽器會處理響應(yīng)，我們就可以拿到響應(yīng)數(shù)據(jù)，如果不包含瀏覽器直接駁回，這時我們無法拿到響應(yīng)數(shù)據(jù)。所以 CORS 的表象是讓你覺得它與同源的 ajax 請求沒啥區(qū)別，代碼完全一樣。
CORS需要瀏覽器和后端同時支持。IE 8 和 9 需要通過 XDomainRequest 來實現(xiàn)。
瀏覽器會自動進行 CORS 通信，實現(xiàn)CORS通信的關(guān)鍵是后端。只要后端實現(xiàn)了 CORS，就實現(xiàn)了跨域。
服務(wù)端設(shè)置 Access-Control-Allow-Origin 就可以開啟 CORS。 該屬性表示哪些域名可以訪問資源，如果設(shè)置通配符則表示所有網(wǎng)站都可以訪問資源。
document.domain
該方式只能用于二級域名相同的情況下，比如 a.test.com 和 b.test.com 適用于該方式。
只需要給頁面添加 document.domain = 'test.com' 表示二級域名都相同就可以實現(xiàn)跨域
這種方式通常用于獲取嵌入頁面中的第三方頁面數(shù)據(jù)。一個頁面發(fā)送消息，另一個頁面判斷來源并接收消息
// 發(fā)送消息端
window.parent.postMessage('message', 'http://test.com');
// 接收消息端
var mc = new MessageChannel();
mc.addEventListener('message', (event) => {
var origin = event.origin || event.originalEvent.origin;
if (origin === 'http://test.com') {
console.log('驗證通過')
}
});
