成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

跨域知識(shí)梳理

SwordFly / 2954人閱讀

摘要：摘自阮一峰博客延伸閱讀不涉及跨域跨源資源分享為標(biāo)準(zhǔn)兼容性參考優(yōu)點(diǎn)提供安全的跨域數(shù)據(jù)傳輸，且不限于請(qǐng)求。跨域資源共享阿里云技術(shù)文檔跨域資源共享詳解阮一峰

參考：
維基百科 - Root domain
https://en.wikipedia.org/wiki...
瀏覽器同源政策及其規(guī)避方法 - 阮一峰
http://www.ruanyifeng.com/blo...
window.name 跨域?qū)崿F(xiàn)原理及實(shí)例
http://blog.csdn.net/qq_34099...
html5 postMessage 官方API
https://developer.mozilla.org...
JSONP（直接跳到JSONP那段）
http://kb.cnblogs.com/page/13...
跨域資源共享 CORS 詳解 - 阮一峰
http://www.ruanyifeng.com/blo...
跨域資源共享（CORS） - 阿里云技術(shù)文檔
https://www.alibabacloud.com/...

1 基本概念 1.1 域&域名 
域 domian : . 根域、.org 頂級(jí)域(一級(jí)域)、.baidu.com 二級(jí)域
域名 domain name : baidu.com 頂級(jí)域名(一級(jí)域名)、www.baidu.com 二級(jí)域名
1.2 同源策略&跨域 
同源條件：協(xié)議相同、域名相同、端口相同，不滿足即為跨域
同源目的：瀏覽器同源策略，保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)
1.3 限制范圍

很多文章中介紹，跨域會(huì)對(duì)以下3種行為進(jìn)行限制：

1）cookie、localStorage、indexedDB
2）dom
3）ajax 請(qǐng)求
我理解按如下分類更為合理：
1）cookie
2）iframe/window.open ( localStorage、indexedDB、dom )
3）ajax 請(qǐng)求

cookie 身份授權(quán)多帶帶一類

localStorage、indexedDB、dom 跨域受限，一般發(fā)生在 iframe 或 window.open 的跨域需求時(shí)，無(wú)法獲取新頁(yè)面的 window 對(duì)象，自然無(wú)法訪問(wèn) window.localStorage、window.indexedDB、document.getElementById

ajax 請(qǐng)求多帶帶一類。

2 實(shí)現(xiàn)跨域 2.1 document.domain 
瀏覽器允許通過(guò)設(shè)置 document.domain 來(lái)實(shí)現(xiàn)跨子域
如有 a.example.com 和 b.example.com 2個(gè)二級(jí)域名，設(shè)置 document.domain=example.com 或 Set-Cookie:key=value;domain=example.com;path=/ 可實(shí)現(xiàn)2個(gè)二級(jí)域之間的跨域
可解決 cookie、iframe、window.open、ajax 的跨域問(wèn)題
2.2 URL #hash + hashChange事件監(jiān)聽(tīng) 
可解決 iframe 的跨域問(wèn)題
不推薦，如 angular.ui.router 前端路由組件會(huì)使用到 URL #hash 字段。
2.3 window.name 
可解決 iframe 的跨域問(wèn)題
window.name 的變化如何監(jiān)聽(tīng)是一個(gè)問(wèn)題，大約可以存儲(chǔ)2M的內(nèi)容
2.4 html5 postMessage + message事件監(jiān)聽(tīng) 
可解決 iframe & window.open 的跨域問(wèn)題
語(yǔ)法：otherWindow.postMessage(message, targetOrigin, [transfer]);
官方API參考
2.5 ajax - JSONP

參考：http://kb.cnblogs.com/page/13...

實(shí)現(xiàn)原理：web頁(yè)面上調(diào)用js文件時(shí)不受同源策略影響，擁有src屬性的標(biāo)簽都擁有跨域的能力，比如
服務(wù)端實(shí)現(xiàn)


客戶端將 http 跨域查詢參數(shù) flightNumber 與回調(diào)函數(shù) flightHandler 傳遞給服務(wù)器，服務(wù)器處理完后動(dòng)態(tài)生成 test.js 返回，瀏覽器加載 test.js 完成后執(zhí)行 flightHandler，完成跨域請(qǐng)求。
在實(shí)際編碼時(shí)，客戶端可使用如 jQuery 封裝好的 JSONP API。

2.6 ajax - websocket

WebSocket是一種通信協(xié)議，使用ws://（非加密）和wss://（加密）作為協(xié)議前綴。該協(xié)議不實(shí)行同源政策，只要服務(wù)器支持，就可以通過(guò)它進(jìn)行跨源通信。摘自阮一峰博客
WebSocket 延伸閱讀（不涉及跨域）


2.7 ajax - CORS

CORS 跨源資源分享（Cross-Origin Resource Sharing）為 W3C 標(biāo)準(zhǔn)（兼容性參考）
優(yōu)點(diǎn)：提供安全的跨域數(shù)據(jù)傳輸，且不限于 GET 請(qǐng)求。
整個(gè)CORS通信過(guò)程，都是瀏覽器自動(dòng)完成，不需要用戶參與。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，CORS通信與同源的AJAX通信沒(méi)有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，有時(shí)還會(huì)多出一次附加的請(qǐng)求。因此，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。
跨域資源共享（CORS） - 阿里云技術(shù)文檔
跨域資源共享CORS詳解 - 阮一峰

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91434.html

相關(guān)文章

  • javasscript - 收藏集 - 掘金

    摘要：跨域請(qǐng)求詳解從繁至簡(jiǎn)前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題。異步編程入門道典型的面試題前端掘金在界中，開(kāi)發(fā)人員的需求量一直居高不下。 jsonp 跨域請(qǐng)求詳解——從繁至簡(jiǎn) - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題...

    Rango 評(píng)論0 收藏0

  • Deep in JS - 收藏集 - 掘金

    摘要：今天同學(xué)去面試，做了兩道面試題全部做錯(cuò)了，發(fā)過(guò)來(lái)給道典型的面試題前端掘金在界中，開(kāi)發(fā)人員的需求量一直居高不下。 排序算法 -- JavaScript 標(biāo)準(zhǔn)參考教程（alpha） - 前端 - 掘金來(lái)自《JavaScript 標(biāo)準(zhǔn)參考教程（alpha）》，by 阮一峰 目錄 冒泡排序 簡(jiǎn)介 算法實(shí)現(xiàn) 選擇排序 簡(jiǎn)介 算法實(shí)現(xiàn) ... 圖例詳解那道 setTimeout 與循環(huán)閉包的經(jīng)典面...

    enali 評(píng)論0 收藏0

  • 從輸入U(xiǎn)RL到頁(yè)面加載的過(guò)程？如何由一道題完善自己的前端知識(shí)體系！

    摘要：前言見(jiàn)解有限，如有描述不當(dāng)之處，請(qǐng)幫忙指出，如有錯(cuò)誤，會(huì)及時(shí)修正。為什么要梳理這篇文章最近恰好被問(wèn)到這方面的問(wèn)題，嘗試整理后發(fā)現(xiàn)，這道題的覆蓋面可以非常廣，很適合作為一道承載知識(shí)體系的題目。 前言 見(jiàn)解有限，如有描述不當(dāng)之處，請(qǐng)幫忙指出，如有錯(cuò)誤，會(huì)及時(shí)修正。 為什么要梳理這篇文章？ 最近恰好被問(wèn)到這方面的問(wèn)題，嘗試整理后發(fā)現(xiàn)，這道題的覆蓋面可以非常廣，很適合作為一道承載知識(shí)體系的題目...

    kel 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)收集 - 收藏集 - 掘金

    摘要：責(zé)編現(xiàn)代化的方式開(kāi)發(fā)一個(gè)圖片上傳工具前端掘金對(duì)于圖片上傳，大家一定不陌生。之深入事件機(jī)制前端掘金事件綁定的方式原生的事件綁定方式有幾種想必有很多朋友說(shuō)種目前，在本人目前的研究中，只有兩種半兩種半還有半種的且聽(tīng)我道來(lái)。 Ajax 與數(shù)據(jù)傳輸 - 前端 - 掘金背景 在沒(méi)有ajax之前，前端與后臺(tái)傳數(shù)據(jù)都是靠表單傳輸，使用表單的方法傳輸數(shù)據(jù)有一個(gè)比較大的問(wèn)題就是每次提交數(shù)據(jù)都會(huì)刷新頁(yè)面，用...

    ygyooo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<