跨域

1.含義:

在不同的域之間進(jìn)行數(shù)據(jù)傳輸和通信

2.起因:

語(yǔ)言安全限制中的同源策略

同源策略是指一段腳本只能讀取來(lái)自同一來(lái)源的窗口和文檔的屬性,同一來(lái)源是指主機(jī)名、協(xié)議和端口號(hào)的組合。

3.分類(lèi):

(1)主機(jī)不同

(2)主域相同子域不同a.c.com和b.c.com

(3)主域不同www.a.com和www.b.com

端口不同www.a.com:8080和www.a.com:8088

協(xié)議不同http://www.a.com和https://www.a.com

端口和協(xié)議不同而造成的跨域問(wèn)題只能通過(guò)后臺(tái)代理解決。

4.解決方案:

(1)基于iframe實(shí)現(xiàn)跨域

基于iframe實(shí)現(xiàn)的跨域要求兩個(gè)頁(yè)面屬于同一基礎(chǔ)域。

在發(fā)起方頁(yè)面和接收方頁(yè)面設(shè)置document.domain,并將值設(shè)為父域的主域名(window.location.hostname);

在發(fā)起方頁(yè)面動(dòng)態(tài)創(chuàng)建一個(gè)隱藏的iframe,iframe的src是接收方頁(yè)面地址。

(2)基于script標(biāo)簽實(shí)現(xiàn)跨域

script標(biāo)簽本身就可以訪問(wèn)其他域的資源,不受瀏覽器同源策略的限制。在發(fā)起方頁(yè)面動(dòng)態(tài)加載一個(gè)script,script的url指向接收方頁(yè)面地址,該頁(yè)面必須生成返回JS數(shù)據(jù),另外url后可以傳遞參數(shù),該方法只支持GET方式提交參數(shù)。

方式一:客戶(hù)端創(chuàng)建函數(shù)對(duì)象callFunc,以接收服務(wù)器返回的JS數(shù)據(jù)并對(duì)其進(jìn)行處理,服務(wù)器端直接調(diào)用客戶(hù)端callFunc函數(shù)并傳遞參數(shù)。

服務(wù)器端:

callFunc({key:'value'});

方式二:客戶(hù)端向服務(wù)器傳送參數(shù);服務(wù)器端接收該參數(shù)并將其連接于返回?cái)?shù)據(jù)之前。

客戶(hù)端:

function callFunc(data){

console.log(data.key);

};

//通過(guò)callback參數(shù)指定回調(diào)函數(shù)

var url="跨域文件路徑?callback=callFunc";

var script=document.createElement('script');

script.setAttribute('src',url);

document.getElementsByTagName('head')[0].appendChild(script);

服務(wù)器端:

$_user = array('username'=>'chen','password'=>'123');

$_callback =$_GET['callback'];

echo$_callback.'('.json_encode($_user).')';

?>

(1)后臺(tái)代理方式

方式一:callback參數(shù)

客戶(hù)端:

$.ajax({

type:"GET",

url:"http://remote.com/domain.jsp?callback=?",

dataType:"json",

success:function(response,status,xhr){

console.log(response);

}

});

方式二:jsonp

客戶(hù)端:

$.ajax({

type:"GET",

url:"http://remote.com/domain.jsp",

dataType:"jsonp",

success:function(response,status,xhr){

console.log(response);

}

});

服務(wù)器端:

<%

Stringcallback=request.getParameter("callback");

out.print(callback+"({\"username\":\"chen\",\"password\":\"123\"})");

%>

JSONP:一種非官方的跨域數(shù)據(jù)交互協(xié)議,允許用戶(hù)傳遞一個(gè)callback參數(shù)給服務(wù)器,然后服務(wù)器返回?cái)?shù)據(jù)時(shí)將此callback參數(shù)作為函數(shù)名包裹住JSON數(shù)據(jù),使得客戶(hù)端可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù),兩種數(shù)據(jù)描述{},[]。

(1)Web頁(yè)面可跨域調(diào)用JS文件。(有src屬性的標(biāo)簽都具有跨域能力)

(2)跨域服務(wù)器動(dòng)態(tài)生成數(shù)據(jù)并存入JS文件供客戶(hù)端調(diào)用。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 什么是跨域? 2.) 資源嵌入:、、、等dom標(biāo)簽,還有樣式中background:url()、@font-fac...
    電影里的夢(mèng)i閱讀 2,389評(píng)論 0 5
  • 個(gè)人轉(zhuǎn)載做筆記用 http://web.jobbole.com/88525/ 這里說(shuō)的js跨域是指通過(guò)js在不同的...
    平謙閱讀 415評(píng)論 0 7
  • 1. 什么是跨域? 跨域一詞從字面意思看,就是跨域名嘛,但實(shí)際上跨域的范圍絕對(duì)不止那么狹隘。具體概念如下:只要協(xié)議...
    w_zhuan閱讀 532評(píng)論 0 0
  • 1. 什么是跨域? 跨域一詞從字面意思看,就是跨域名嘛,但實(shí)際上跨域的范圍絕對(duì)不止那么狹隘。具體概念如下:只要協(xié)議...
    他在發(fā)呆閱讀 829評(píng)論 0 0
  • 10月份真的是忙成狗,一周三天上課,兩天去實(shí)習(xí),實(shí)習(xí)來(lái)回需要三個(gè)小時(shí)坐地鐵,千字文計(jì)劃不能放棄,跑步計(jì)劃必須完成。...
    艾滌生微習(xí)慣3650天閱讀 1,648評(píng)論 17 34