1： 什么是同源策略

• 其中同源指的是：
  1.協(xié)議相同
  2.域名相同
  3.端口相同
  一個域內(nèi)的腳本僅僅具有本域內(nèi)的權(quán)限，可以理解為本域腳本只能讀寫本域內(nèi)的資源，而無法訪問其它域的資源。這種安全限制稱為同源策略。
• 同源策略是瀏覽器最基本的安全功能。如果沒有同源策略，那么普通用戶將沒有安全可言。用戶的所有私密信息都可以被被任何人獲取，例如網(wǎng)站的Cookie、email的郵件內(nèi)容。還很容易遭受CSRF攻擊。
• 要注意的是，域名和域名對應(yīng)ip是不同源的；主域名相同，子域名不相同也是不同源的
• 同源政策的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。
  舉例來說，http://www.jirengu.com/dir/page.html這個網(wǎng)址，協(xié)議是http://，域名是www.jirengu.com，端口是80（默認(rèn)端口可以省略）。它的同源情況如下。

http://www.jirengu.com/dir2/other.html：同源
http://jirengu.com/dir/other.html：不同源（域名不同）
http://v2.www.jirengu.com/dir/other.html：不同源（域名不同）
http://www.jirengu.com:81/dir/other.html：不同源（端口不同）

2： 什么是跨域？跨域有幾種實現(xiàn)形式

• 跨域是指不同域名之間相互訪問。
• 跨域的實現(xiàn)方式有：
  1.JSONP
  2.CORS
  3.降域
  4.postMessage

3： JSONP 的原理是什么

• 原理：<script src="XXX"></script>獲取不同域的資源不受同源策略的作用，并且請求到資源后立即執(zhí)行
• 首先全局注冊一個回調(diào)函數(shù)callback。該函數(shù)的參數(shù)是JSON格式。函數(shù)的內(nèi)容是一系列代碼處理這個參數(shù)，像這樣function callback(arg){xxx}
• 動態(tài)生成一個script標(biāo)簽，src為：請求資源的地址＋獲取函數(shù)的字段名＋回調(diào)函數(shù)名稱。獲取函數(shù)的字段名是要和服務(wù)端約定好的。例如src="http://example.com?callbackName=callback"。
• 在服務(wù)器端，在接受到script的請求之后，從url的query的callbackName獲取到回調(diào)函數(shù)的名字callback。然后動態(tài)生成JSON格式的參數(shù)，并且將該參數(shù)傳入callback函數(shù)，調(diào)用該函數(shù)。像這樣callback({key: value})。
• 因為script標(biāo)簽引入的資源會作為JS加載，所以，callback({key: value})會被作為JS代碼執(zhí)行，并且callback是被注冊過的函數(shù)，所以是可以執(zhí)行成功的

4： CORS是什么

• CORS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器與服務(wù)器應(yīng)該如何溝通。
• CORS背后的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請求或響應(yīng)是應(yīng)該成功還是失敗。
• 在瀏覽器端的區(qū)別就是，xhr.open(url)的url要從相對路徑變?yōu)榻^對路徑
• 在服務(wù)器端，要設(shè)置Access-Control-Allow-Origin
• CORS有兩種情況，分別為簡單請求和非簡單請求

  • 簡單的含義是：請求方法為HEAD、GET、POST三者之一并且HTTP的頭信息不超出以下幾種字段：

  • Accept

  • Accept-Language

  • Content-Language

  • Last-Event-ID

  • Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

  • 對于簡單的跨域請求，瀏覽器會自動在請求的頭信息加上 Origin 字段，表示本次請求來自哪個源（協(xié)議 + 域名 + 端口），服務(wù)端會獲取到這個值，然后判斷是否同意這次請求并返回

• 非簡單請求可以顧名思義，對于這類請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預(yù)檢"請求（preflight）
  • 瀏覽器先詢問服務(wù)器，當(dāng)前網(wǎng)頁所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會發(fā)出正式的XMLHttpRequest請求，否則就報錯。
  • "預(yù)檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。
  • 一旦服務(wù)器通過了"預(yù)檢"請求，以后每次瀏覽器正常的CORS請求，就都跟簡單請求一樣，會有一個Origin頭信息字段。服務(wù)器的回應(yīng)，也都會有一個Access-Control-Allow-Origin頭信息字段。

5： 根據(jù)視頻里的講解演示三種以上跨域的解決方式

• JSONP

//瀏覽器端
var jsonp = document.createElement("script");    //創(chuàng)建一個script標(biāo)簽
jsonp.src = "http://www.test.com:8080/getdata?callbackName=callback"; //設(shè)置src地址
document.getElementsByTagName("head")[0].appendChild(jsonp); //將script放在head里面

//定義callback函數(shù)
function callback(args){
    console.log(args);
    console.log("JSONP跨域成功")
}

//服務(wù)器端
app.get('/getdata', function(req, res){
    var data = {a: 1,};
    res.send(req.query.callbackName + '(' + JSON.stringify(data) + ')');
})

• CORS

//瀏覽器端
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200 || xhr.status === 304){
            var result = JSON.parse(xhr.responseText);
            console.log(result);
            console.log("CORS跨域成功");
        }
    }
}
xhr.open("GET", "http://b.test.com:8080/getdata/"); //從http://b.test.com:8080/getdata/獲取數(shù)據(jù)
xhr.send();

//服務(wù)端
app.get('/getdata', function(req, res){
  var data = {a: 1,};
  res.header("Access-Control-Allow-Origin", "http://a.test.com:8080"); //后臺允許http://a.test.com:8080請求數(shù)據(jù)
  res.send(data);
})

• 降域

//在主頁面http://a.test.com/a.html 中設(shè)置document.domain
    document.domain = 'test.com';
    var iframeWindow = document.getElementById('iframe').contentWindow
//在被Iframe引入的頁面 http://b.test.com/b.html 中也設(shè)置document.domain
    document.domain = 'test.com'

• window.postMessage

//主頁面http://a.test.com/a.html
    var iframeWindow =document.getElementById('iframe').contentWindow;
    iframeWindow.postMessage("some Messages", "*");
//在被Iframe引入的頁面 http://b.test.com/b.html 
    window.onmessage = function(e) {
        e = e || event;
        console.log(e.data);
    }