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

什么是跨域？

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

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

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

1、jsonp

原理：動態(tài)創(chuàng)建一個script標(biāo)簽。利用script標(biāo)簽的src屬性不受同源策略限制。因為所有的src屬性和href屬性都不受同源策略限制?？梢哉埱蟮谌椒?wù)器數(shù)據(jù)內(nèi)容。

步驟：

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

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

（3）接口參數(shù),必須要帶一個自定義函數(shù)名 要不然后臺無法返回數(shù)據(jù)。

（4）通過定義函數(shù)名去接收后臺返回數(shù)據(jù)

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

2、 CORS：跨域資源共享

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

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

Access-Control-Allow-Origin: * //允許所有域名訪問，或者

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

3、反向代理

4、window+iframe

猜你喜歡

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

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

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

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