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

資訊專欄INFORMATION COLUMN

跨域的解決方式

yanwei / 2635人閱讀

摘要：同源政策協(xié)議域名端口均相同。解決方式一原理通過動態(tài)添加一個元素，向服務(wù)器請求數(shù)據(jù)。服務(wù)器接收請求返回到指定具名回調(diào)函數(shù)。注意查詢的中需要指定回調(diào)函數(shù)的名字。缺陷是方式獲取，不支持。五是跨域資源分享。

同源政策：協(xié)議、域名、端口均相同。

非同源限制：

cookie、localStorage、indexDB無法讀取。

DOM無法獲取。

AJAX請求無法發(fā)送。

解決方式：

一、JSONP

原理：通過動態(tài)添加一個 

頁面二："https://www.example.com/page2.html"    //接收頁面

事件接收window.addEventListener("message", function(){});中的message事件對象event有三個屬性：
1、event.source：發(fā)送消息的窗口
2、event.origin: 消息發(fā)向的網(wǎng)址
3、event.data: 消息內(nèi)容

三、iframe

iframe載入頁面和src里面的目標(biāo)域是同一個域，是能夠發(fā)起ajax請求（父子窗口）。 //前提是同源，不同源就不可以發(fā)起ajax請求。

不同窗口同源之間是可以獲取window對象，但是不能獲取window對象的屬性和方法。 //不同源會報錯

1、document.domain + iframe（同源可用 -- 跨子域）

document.domain屬性：一級域名相同，二級域名不同可以實現(xiàn)window對象獲取。

頁面一："https://segmentfault.com/page1.html"

頁面二："https://segmentfault.com/page2.html"

缺陷：主域名得一致。

2、window.name + iframe（非同源可用）

window.name屬性：在一個窗口的生命周期內(nèi)，無論是否同源，同一個窗口的載入頁面window.name屬性是共享的，每個頁面都可以操作。

頁面一："https://segmentfault.com/page1.html"

頁面二："https://segmentfault.com/page2.html"

缺陷：兼容性不好

3、location.hash + iframe（非同源可用）

片段標(biāo)識符：片段標(biāo)識符是指url#號后面的部分。只是改變片段標(biāo)識符頁面不刷新。

頁面一："https://www.segmentfault.com/page1.html"

頁面二："https://www.example.com/page2.html#messgae"

頁面三："ttps:/www.segmentfault.com/page3html#somedata"

缺點：數(shù)據(jù)暴露在url，長度也有限制。

四、WebSocket

WebSocket：瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)。

設(shè)置WebSocket請求頭信息，服務(wù)器支持就可以進行。

Origin: http://example.com        //根據(jù)域名是否在白名單內(nèi)來判斷是否可以通信

缺點：實現(xiàn)成本高。

五、CORS

cors是跨域資源分享?，F(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實現(xiàn)了CORS接口，就可以跨源通信。

缺點：服務(wù)器配置，占用主域帶寬。

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

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

相關(guān)文章

  • 跨域

    摘要：所謂同源是指協(xié)議域名端口三者相同，即便兩個不同的域名指向同一個地址，也非同源，看看下面的產(chǎn)生跨域的場景你就會明白同源策略的含義。 前端跨域問題我想很多同學(xué)遇到過，或者是剛剛請求數(shù)據(jù)成功, 然而轉(zhuǎn)眼之后就會報錯XMLHttpRequest cannot load http://www.server.com/server.... No Access-Control-Allow-Origin...

    chaos_G 評論0 收藏0

  • AJAX跨域完全講解

    摘要：跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了跨域完全講解我在收集面試題的時候其實就已經(jīng)有過跨域的問題的了，當(dāng)時候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了跨域的理解，以此記錄下來。 AJAX跨域完全講解 今天在慕課網(wǎng)上學(xué)習(xí)了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經(jīng)有過AJAX跨域...

    alexnevsky 評論0 收藏0

  • AJAX跨域完全講解

    摘要：跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了跨域完全講解我在收集面試題的時候其實就已經(jīng)有過跨域的問題的了，當(dāng)時候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了跨域的理解，以此記錄下來。 AJAX跨域完全講解 今天在慕課網(wǎng)上學(xué)習(xí)了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經(jīng)有過AJAX跨域...

    i_garfileo 評論0 收藏0

  • php后端控制可跨域的域名,允許圖片跨域上傳

    摘要：跨域問題經(jīng)常需要面對，前端需要做的比較直接要么選擇異步提交，或者，要么表單提交基本可以搞定大部分跨域問題，但問題也比較明顯，只能通過方式提交并且是通過把參數(shù)拼到上提交請求的但是所有瀏覽器有長度限制，不同瀏覽器長度限制不一樣當(dāng)出現(xiàn)要提交大段落 跨域問題經(jīng)常需要面對，前端需要做的比較直接要么選擇ajax異步提交，XML或者jsonp，要么表單提交 jsonp基本可以搞定大部分跨域問題，但問...

    Dean 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<