同源策略 :
- 是由網(wǎng)景公司提出的一個(gè)著名的安全策略.現(xiàn)在所有支持JavaScript的瀏覽器都會(huì)使用這個(gè)策略.
- 所謂同源是指 : 域名 協(xié)議 端口相同.
- 例如 : 兩個(gè)項(xiàng)目之間,端口不同.項(xiàng)目一向項(xiàng)目二發(fā)送請(qǐng)求的時(shí)候.
- 項(xiàng)目二可以接受,也可處理.但是不能向項(xiàng)目一響應(yīng)數(shù)據(jù).
- 會(huì)報(bào)一個(gè) --已攔截跨源請(qǐng)求:同源策略禁止??讀取位置項(xiàng)目一ip+端口+路徑的遠(yuǎn)程資源.(原因:CORS頭缺少'Access-Control-Allow-Origin'.
- !!!這里要注意 : 項(xiàng)目二中的訪問已經(jīng)發(fā)生,說明是瀏覽器對(duì)非同源請(qǐng)求返回的結(jié)果做了攔截
Jsonp(只支持GET請(qǐng)求)
- jsonp是json用來跨域的一個(gè)東西. 它的原理是通過script標(biāo)簽的跨域特性來繞過同源策略.
- Json是數(shù)據(jù)交換的格式,
- jsonp是數(shù)據(jù)傳遞雙方約定的方式
- 看! 這是算不算是跨了個(gè)站.
繼續(xù)
- 在項(xiàng)目一中 創(chuàng)建一個(gè)script標(biāo)簽
- 在src里面,填寫你要訪問的跨域路徑,也就是項(xiàng)目二的ip+端口+路徑
- 現(xiàn)在 你再刷新項(xiàng)目一的頁(yè)面,就會(huì)觸發(fā)script標(biāo)簽,此時(shí)會(huì)打印出來項(xiàng)目二中傳來的值
以上
- 就是jsonp簡(jiǎn)單的實(shí)現(xiàn)模式,也可說是jsonp的原型; 創(chuàng)建一個(gè)回調(diào)函數(shù),然后在遠(yuǎn)程服務(wù)上調(diào)用這個(gè)函數(shù)并且將json數(shù)據(jù)形式作為參數(shù)傳遞,完成回調(diào).
劃重點(diǎn)!
- 將JSON數(shù)據(jù)填充進(jìn)回調(diào)函數(shù),這就是JSONP的 JSON+Padding的含義
- JSONP是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實(shí)現(xiàn)跨域訪問（這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式）。
一般情況下,我們會(huì)希望這個(gè)script標(biāo)簽?zāi)軌騽?dòng)態(tài)的調(diào)用,而不是像項(xiàng)目一中因?yàn)楣潭ㄔ趆tml中。
demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<input type="button" onclick="Jsonp1();" value='提交'/>
</p>
<p>
<input type="button" onclick="Jsonp2();" value='提交'/>
</p>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function Jsonp1(){
var tag = document.createElement('script');
tag.src = "http://c2.com:8000/test/";
document.head.appendChild(tag);
document.head.removeChild(tag);
}
function Jsonp2(){
$.ajax({
url: "http://c2.com:8000/test/",
type: 'GET',
dataType: 'JSONP',
success: function(data, statusText, xmlHttpRequest){
console.log(data);
}
})
}
</script>
</body>
</html>
