1： 什么是同源策略
- 其中同源指的是：
1.協議相同
2.域名相同
3.端口相同
一個域內的腳本僅僅具有本域內的權限，可以理解為本域腳本只能讀寫本域內的資源，而無法訪問其它域的資源。這種安全限制稱為同源策略。 - 同源策略是瀏覽器最基本的安全功能。如果沒有同源策略，那么普通用戶將沒有安全可言。用戶的所有私密信息都可以被被任何人獲取，例如網站的Cookie、email的郵件內容。還很容易遭受CSRF攻擊。
- 要注意的是，域名和域名對應ip是不同源的；主域名相同，子域名不相同也是不同源的
- 同源政策的目的，是為了保證用戶信息的安全，防止惡意的網站竊取數據。
舉例來說，http://www.jirengu.com/dir/page.html這個網址，協議是http://，域名是www.jirengu.com，端口是80（默認端口可以省略）。它的同源情況如下。
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： 什么是跨域？跨域有幾種實現形式
- 跨域是指不同域名之間相互訪問。
- 跨域的實現方式有：
1.JSONP
2.CORS
3.降域
4.postMessage
3： JSONP 的原理是什么
- 原理：
<script src="XXX"></script>獲取不同域的資源不受同源策略的作用，并且請求到資源后立即執行 - 首先全局注冊一個回調函數
callback。該函數的參數是JSON格式。函數的內容是一系列代碼處理這個參數，像這樣function callback(arg){xxx} - 動態生成一個
script標簽，src為：請求資源的地址＋獲取函數的字段名＋回調函數名稱。獲取函數的字段名是要和服務端約定好的。例如src="http://example.com?callbackName=callback"。 - 在服務器端，在接受到
script的請求之后，從url的query的callbackName獲取到回調函數的名字callback。然后動態生成JSON格式的參數，并且將該參數傳入callback函數，調用該函數。像這樣callback({key: value})。 - 因為
script標簽引入的資源會作為JS加載，所以，callback({key: value})會被作為JS代碼執行，并且callback是被注冊過的函數，所以是可以執行成功的
4： CORS是什么
- CORS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器與服務器應該如何溝通。
- CORS背后的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功還是失敗。
- 在瀏覽器端的區別就是，xhr.open(url)的url要從相對路徑變為絕對路徑
- 在服務器端，要設置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 字段，表示本次請求來自哪個源（協議 + 域名 + 端口），服務端會獲取到這個值，然后判斷是否同意這次請求并返回
- 非簡單請求可以顧名思義，對于這類請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）
- 瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答復，瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。
- "預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。
- 一旦服務器通過了"預檢"請求，以后每次瀏覽器正常的CORS請求，就都跟簡單請求一樣，會有一個Origin頭信息字段。服務器的回應，也都會有一個Access-Control-Allow-Origin頭信息字段。
5： 根據視頻里的講解演示三種以上跨域的解決方式
- JSONP
//瀏覽器端
var jsonp = document.createElement("script"); //創建一個script標簽
jsonp.src = "http://www.test.com:8080/getdata?callbackName=callback"; //設置src地址
document.getElementsByTagName("head")[0].appendChild(jsonp); //將script放在head里面
//定義callback函數
function callback(args){
console.log(args);
console.log("JSONP跨域成功")
}
//服務器端
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/獲取數據
xhr.send();
//服務端
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請求數據
res.send(data);
})
- 降域
//在主頁面http://a.test.com/a.html 中設置document.domain
document.domain = 'test.com';
var iframeWindow = document.getElementById('iframe').contentWindow
//在被Iframe引入的頁面 http://b.test.com/b.html 中也設置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);
}
