什么是跨域？VUE如何實(shí)現(xiàn)跨域？

什么是跨域？

“跨域”指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本，它是由瀏覽器的同源策略造成的，是瀏覽器對(duì)javascript施加的安全限制，防止他人惡意攻擊網(wǎng)站。

比如一個(gè)黑客，他利用iframe把真正的銀行登錄頁(yè)面嵌到他的頁(yè)面上，當(dāng)你使用真實(shí)的用戶(hù)名和密碼登錄時(shí)，如果沒(méi)有同源限制，他的頁(yè)面就可以通過(guò)JavaScript讀取到你的表單中輸入的內(nèi)容，這樣用戶(hù)名和密碼就輕松到手了。

VUE如何實(shí)現(xiàn)跨域？

1、jsonp

原理：動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽。利用script標(biāo)簽的src屬性不受同源策略限制。因?yàn)樗械膕rc屬性和href屬性都不受同源策略限制?？梢哉?qǐng)求第三方服務(wù)器數(shù)據(jù)內(nèi)容。

步驟：

（1）去創(chuàng)建一個(gè)script標(biāo)簽

（2）script的src屬性設(shè)置接口地址

（3）接口參數(shù),必須要帶一個(gè)自定義函數(shù)名 要不然后臺(tái)無(wú)法返回?cái)?shù)據(jù)。

（4）通過(guò)定義函數(shù)名去接收后臺(tái)返回?cái)?shù)據(jù)

//去創(chuàng)建一個(gè)script標(biāo)簽
var script = document.createElement("script");
//script的src屬性設(shè)置接口地址 并帶一個(gè)callback回調(diào)函數(shù)名稱(chēng)
script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到頁(yè)面
document.head.appendChild(script);
//通過(guò)定義函數(shù)名去接收后臺(tái)返回?cái)?shù)據(jù)function jsonpCallback(data){
//注意 jsonp返回的數(shù)據(jù)是json對(duì)象可以直接使用
//Ajax 取得數(shù)據(jù)是json字符串需要轉(zhuǎn)換成json對(duì)象才可以使用。
//}

2、 CORS：跨域資源共享

原理：服務(wù)器設(shè)置Access-Control-Allow-OriginHTTP響應(yīng)頭之后，瀏覽器將會(huì)允許跨域請(qǐng)求

限制：瀏覽器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上需要后臺(tái)設(shè)置

Access-Control-Allow-Origin: * //允許所有域名訪問(wèn)，或者

Access-Control-Allow-Origin: HTTP://a.com //只允許所有域名訪問(wèn)

3、反向代理

4、window+iframe

猜你喜歡

在vue中v-for指令中key作用

v-show和v-if有什么區(qū)別？

VUE框架有哪些優(yōu)點(diǎn)？

黑馬程序員HTML&JS+前端開(kāi)發(fā)課程