1、神馬是跨域(Cross Domain)
對于端口和協(xié)議的不同,只能通過后臺(tái)來解決。
一句話:同一個(gè)ip、同一個(gè)網(wǎng)絡(luò)協(xié)議、同一個(gè)端口,三者都滿足就是同一個(gè)域,否則就是
跨域問題了。而為什么開發(fā)者最初不直接定為一切可跨域的呢?默認(rèn)的為什么都是不可跨域呢?這就涉及到了同源策
略,為了系統(tǒng)的安全,由Netscape提出一個(gè)著名的安全策略?,F(xiàn)在所有支持JavaScript的瀏覽器都會(huì)使用這個(gè)策略。
所謂同源是,域名,協(xié)議,端口相同。當(dāng)我們在瀏覽器中打開百度和谷歌兩個(gè)網(wǎng)站時(shí),百度瀏覽器在執(zhí)行一個(gè)腳本的
時(shí)候會(huì)檢查這個(gè)腳本屬于哪個(gè)頁面的,即檢查是否同源,只有和百度同源的腳本才會(huì)被執(zhí)行,如果沒有同源策略,那
隨便的向百度中注入一個(gè)js腳本,彈個(gè)惡意廣告,通過js竊取信息,這就很不安全了。
說白點(diǎn)就是post、get的url不是你當(dāng)前的網(wǎng)站,域名不同。例如在aaa.com/a.html里面,表單的提交action是bbb.com/b.html。
不僅如此,www.aaa.com和aaa.com之間也屬于跨域,因?yàn)閣ww.aaa.com是二級域名,aaa.com是根域名。
JavaScript出于安全方面的考慮,是不允許跨域調(diào)用其他頁面的對象的(同源策略 Same-Origin Policy)。
關(guān)于JavaScript能否跨域通信的詳細(xì)說明,見下表:
http://www.a.com/a.js訪問以下URL的結(jié)果
URL | 說明 | 是否允許通信 |
---|---|---|
http://www.a.com/b.js | 同一域名下 | 允許 |
http://www.a.com/script/b.js | 同一域名下不同文件夾 | 允許 |
http://www.a.com:8000/b.js | 同一域名,不同端口 | 不允許 |
https://www.a.com/b.js | 同一域名,不同協(xié)議 | 不允許 |
http://70.32.92.74/b.js | 域名和域名對應(yīng)ip | 不允許 |
http://script.a.com/b.js | 主域相同,子域不同 | 不允許 |
http://a.com/b.js | 同一域名,不同二級域名(同上) | 不允許 |
http://www.b.com/b.js | 不同域名 | 不允許 |
2、為嘛要跨域
基于兩個(gè)方面:
a. web應(yīng)用本身是部署在不同的服務(wù)器上
b.基于開發(fā)的角度 --- 前后端分離
web應(yīng)用本身是部署在不同的服務(wù)器上,對應(yīng)的域名也就有所不同
比如百度。
需要在不同的域之間,通過ajax方式互相請求,是非常常見的需求。
基于開發(fā)的角度
現(xiàn)在提倡的前后端分離開發(fā)。
前端負(fù)責(zé)寫html、css、js代碼,需要向后臺(tái)要數(shù)據(jù),渲染到頁面。
后臺(tái)負(fù)責(zé)寫業(yè)務(wù)邏輯,向前臺(tái)提供數(shù)據(jù)。
后臺(tái)提供的數(shù)據(jù),作為前端如何才能拿到呢?
這就需要前后端進(jìn)行協(xié)作。
后臺(tái),只負(fù)責(zé)提供API,就是一個(gè)ulr,比如,
前臺(tái),需要通過ajax發(fā)起請求,去獲取數(shù)據(jù)。
在開發(fā)的時(shí)候,
后臺(tái)的代碼部署在一個(gè)服務(wù)器上。
前端的代碼部署在另外一個(gè)服務(wù)器上。
前臺(tái)在向后臺(tái)通過ajax去請求數(shù)據(jù)的時(shí)候,就涉及到跨域。
就比如,我們的后臺(tái)已經(jīng)開發(fā)好了一個(gè)功能,獲取當(dāng)前首頁面的輪播圖中的電影數(shù)據(jù),給前臺(tái)提供的url如下:
我是前端開發(fā)人員,需要獲取該數(shù)據(jù),然后渲染到頁面上。
此時(shí),必須要使用ajax方式。
3、腫么跨域
關(guān)于跨域,有多達(dá)七八種方案。
其中有如下三種方案,是需要重點(diǎn)關(guān)注:
a. Cors
b. Jsonp(重點(diǎn))
c.代理
Cors
本意:cross origin resource share,跨資源共享
場景:服務(wù)端的代碼在我的控制范圍之內(nèi),換言之,后臺(tái)提供的api代碼,我是有權(quán)限去操作的。只需要在服務(wù)端編寫代碼,瀏覽器端不用寫任何代碼。
這種方式最簡單,只需要在服務(wù)端設(shè)置幾個(gè)頭信息即可。
在node中,設(shè)置如下:
res.setHeader('Access-Control-Allow-Origin', "*"); //針對哪個(gè)域名可以訪問,*表示所有
res.setHeader('Access-Control-Allow-Credentials', true); //是否可以攜帶cookie
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');