跨域的解決方式

跨域有很多種方式,下面就簡單說說跨域最常見的幾種解決方式
1、JSONP
JSONP是服務(wù)器與客戶端跨源通信的常用方法。最大特點就是簡單適用,兼容性好。主要利用html中script標(biāo)簽可以引入其他域的js文件,利用這個特性可以實現(xiàn)跨域訪問接口,需要后端的支持。實現(xiàn)步驟:
1.定義數(shù)據(jù)處理函數(shù)fun:
2.網(wǎng)頁通過添加一個<script>元素,src的地址執(zhí)行后端接口最后加個參數(shù)callback=fun,向服務(wù)器請求JSON數(shù)據(jù),這種做法不受同源政策限制;
3.服務(wù)器收到請求后,將數(shù)據(jù)放在fun回調(diào)函數(shù)里傳回來,輸出fun(data):
4.fun(data)會放到script標(biāo)簽作為js執(zhí)行,此時會調(diào)用fun(data),將data作為參數(shù)。
代碼地址

若水GIF截圖_2017年6月27日14點36分21秒.gif

2、CORS
CORS全稱是"跨域資源共享"(Cross-origin resource sharing)。
它允許瀏覽器向跨源服務(wù)器,發(fā)出XMLHttpRequest請求。支持現(xiàn)代瀏覽器,IE10以上瀏覽器。CORS需要瀏覽器和服務(wù)器的支持,因此,實現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實現(xiàn)了CORS接口,就可以跨源通信。
當(dāng)CORS請求滿足下面的條件時
1.請求方法是以下三種方法之一:
HEAD
GET
POST
2.HTTP的頭信息不超出以下幾種字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
基本思想是
1.當(dāng)使用XMLHttpRequest()發(fā)送請求的時候,瀏覽器發(fā)現(xiàn)該請求不符合同源策略,會給該請求的頭部信息添加一個origin字段,Origin字段用來說明,本次請求來自哪個源,服務(wù)器根據(jù)這個值,決定是否同意這次請求。
如果Origin指定的源,不被服務(wù)器允許,服務(wù)器也會返回正常的HTTP響應(yīng),瀏覽器發(fā)現(xiàn)響應(yīng)頭沒有包含origin字段,就拋出錯誤,被onerror回調(diào)函數(shù)捕獲,這種錯誤狀態(tài)碼無法識別。
2.如果指定的源,被服務(wù)器允許,服務(wù)器返回響應(yīng)信息的響應(yīng)頭會包含origin的信息
代碼地址

若水GIF截圖_2017年6月27日18點1分15秒.gif

多么痛的領(lǐng)悟,忘記重新啟動服務(wù)器了,結(jié)果沒有返回數(shù)據(jù),json解析一直報錯,以后記得重新啟動服務(wù)器。
3、降域(document.domain)
document.domain用于主域相同子域不同的場景
降域的設(shè)置也是有限制的,只能把document.domain,設(shè)置成自身或者更高一級的域,且主域必須相同,如:a.b.test.com中的某個文檔的域可以設(shè)置成a.b.test.com、b.test.com、test.com。但是不可以設(shè)置成.com或者c.a.b.test.com或者baidu.com,因為baidu.com主域和當(dāng)前域不同了。
使用方法
代碼地址

若水GIF截圖_2017年6月27日17點13分54秒.gif

4、postMessage
postMessage是html5新增的方法,可以實現(xiàn)跨文本檔、多窗口、跨域消息傳遞。該方法可以通過綁定window的message事件來監(jiān)聽發(fā)送跨文檔消息傳輸內(nèi)容。postMessage(data,origin)方法接受兩個參數(shù):
1.data:要傳遞的數(shù)據(jù)。
2.origin:字符串參數(shù),指明目標(biāo)窗口的源,協(xié)議+主機+端口號[+URL],URL會被忽略,所以可以不寫,這個參數(shù)是為了安全考慮postMessage()方法只會將message傳遞給指定窗口,如果設(shè)置為"*",這樣可以傳遞給任意窗口。
代碼地址

若水GIF截圖_2017年6月27日11點4分18秒.gif

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • jsonp html中可以通過script標(biāo)簽引入其他域的js,利用這一特性,結(jié)合后端支持,可以實現(xiàn)跨域訪問接口實...
    billa_8f6b閱讀 450評論 0 0
  • jsonp html中可以通過script標(biāo)簽引入其他域的js,利用這一特性,結(jié)合后端支持,可以實現(xiàn)跨域訪問接口實...
    madpluto閱讀 335評論 0 0
  • 瀏覽器安全的基石是"同源政策"。所謂"同源"指的是"三個相同"。 協(xié)議相同 域名相同 端口相同 同源政策的目的,是...
    cce117b0a0ce閱讀 316評論 0 1
  • 文/一淺疏影 那年江南,煙雨縹緲。水墨淡抹,勾勒如畫的古鎮(zhèn),風(fēng)光旖旎依舊。亭臺軒榭,繞曲回廊,零星點綴的夜幕下,木...
    一淺疏影閱讀 1,066評論 24 48
  • 微博自2009年誕生之后曾經(jīng)一路高歌猛進,但在2013年,它似乎陷入了危機。那時候在用戶眼里,微博沒什么內(nèi)容可看了...
    老徐的自白書閱讀 733評論 0 0

友情鏈接更多精彩內(nèi)容