什么是同源策略##
同源策略是瀏覽器最基本的功能或南,同源指得是相同的域名孩等、協(xié)議和端口號,不同的源的客戶端腳本在沒有明確授權(quán)的情況下采够,無法相互讀取對方的資源稱之為同源策略肄方。
什么是跨域?跨域有幾種實現(xiàn)形式##
跨域即突破同源策略限制的方法,并且都需要得到服務(wù)端的支持,有如下幾種形式:
JSONP:html中script標簽可以引入其他域下的js吁恍,比如引入線上的jquery庫扒秸。
- 創(chuàng)建script標簽,src的地址執(zhí)行后端接口冀瓦,最后加個參數(shù)callback=function,其中function為本地定義的處理后端數(shù)據(jù)的函數(shù)
- 服務(wù)端在收到請求后伴奥,解析參數(shù),計算返還數(shù)據(jù)翼闽,輸出 function(data) 字符串
- function(data)會放到script標簽做為js執(zhí)行拾徙。此時會調(diào)用function函數(shù),將data做為參數(shù)
CORS:CORS 的表象是讓你覺得它與同源的 ajax 請求沒啥區(qū)別感局,代碼完全一樣尼啡。
- 當使用 XMLHttpRequest 發(fā)送請求時,瀏覽器發(fā)現(xiàn)該請求不符合同源策略询微,會給該請求加一個請求頭:Origin
- 后臺進行一系列處理崖瞭,如果確定接受請求則在返回結(jié)果中加入一個響應(yīng)頭:Access-Control-Allow-Origin;如果其值包含域名或者 “”號〕琶“”號表示允許任何域名向我們的服務(wù)端提交請求
- 瀏覽器判斷該相應(yīng)頭中是否包含 Origin 的值书聚,如果有則瀏覽器會處理響應(yīng),我們就可以拿到響應(yīng)數(shù)據(jù)藻雌,如果不包含瀏覽器直接駁回雌续,這時我們無法拿到響應(yīng)數(shù)據(jù)。
降域
使用document.domain的方法實現(xiàn)相同基礎(chǔ)域名之間的跨域
例:有三個域名
a.test.com
b.test.com
test.com
可在a.test.com和b.test.com加入document.domain = "test.com"實現(xiàn)以上三個域名之間的跨域胯杭。
postmessage
postmessage為window的方法,可實現(xiàn)跨文檔驯杜、多窗口、跨域消息的傳遞做个,postMessage(data,origin)方法接受兩個參數(shù)鸽心,data是要傳遞的數(shù)據(jù),origin是目標的源
參考參考:http://www.cnblogs.com/dolphinX/p/3464056.html
同源策略及跨域出錯演示##
同源策略.png
跨域出錯.png
JSONP跨域及CORS跨域演示##
JSONP跨域.png
CORS跨域.png