摘要:同源政策協議域名端口均相同。解決方式一原理通過動態添加一個元素,向服務器請求數據。服務器接收請求返回到指定具名回調函數。注意查詢的中需要指定回調函數的名字。缺陷是方式獲取,不支持。五是跨域資源分享。
同源政策:協議、域名、端口均相同。
非同源限制:
cookie、localStorage、indexDB無法讀取。
DOM無法獲取。
AJAX請求無法發送。
解決方式:
一、JSONP原理:通過動態添加一個
頁面二:"https://www.example.com/page2.html" //接收頁面
事件接收window.addEventListener("message", function(){});中的message事件對象event有三個屬性:
1、event.source:發送消息的窗口
2、event.origin: 消息發向的網址
3、event.data: 消息內容
iframe載入頁面和src里面的目標域是同一個域,是能夠發起ajax請求(父子窗口)。 //前提是同源,不同源就不可以發起ajax請求。
不同窗口同源之間是可以獲取window對象,但是不能獲取window對象的屬性和方法。 //不同源會報錯
1、document.domain + iframe(同源可用 -- 跨子域)document.domain屬性:一級域名相同,二級域名不同可以實現window對象獲取。
頁面一:"https://segmentfault.com/page1.html"
頁面二:"https://segmentfault.com/page2.html"
缺陷:主域名得一致。
2、window.name + iframe(非同源可用)window.name屬性:在一個窗口的生命周期內,無論是否同源,同一個窗口的載入頁面window.name屬性是共享的,每個頁面都可以操作。
頁面一:"https://segmentfault.com/page1.html"
頁面二:"https://segmentfault.com/page2.html"
缺陷:兼容性不好
3、location.hash + iframe(非同源可用)片段標識符:片段標識符是指url#號后面的部分。只是改變片段標識符頁面不刷新。
頁面一:"https://www.segmentfault.com/page1.html"
頁面二:"https://www.example.com/page2.html#messgae"
頁面三:"ttps:/www.segmentfault.com/page3html#somedata"
缺點:數據暴露在url,長度也有限制。
四、WebSocketWebSocket:瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求,連接建立以后,客戶端和服務器端就可以通過 TCP 連接直接交換數據。
設置WebSocket請求頭信息,服務器支持就可以進行。
Origin: http://example.com //根據域名是否在白名單內來判斷是否可以通信
缺點:實現成本高。
五、CORScors是跨域資源分享?,FCORS通信的關鍵是服務器。只要服務器實現了CORS接口,就可以跨源通信。
缺點:服務器配置,占用主域帶寬。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102985.html
摘要:跨域完全講解今天在慕課網上學習了跨域完全講解我在收集面試題的時候其實就已經有過跨域的問題的了,當時候知道了為什么會存在跨域,以及跨域解決的方案有哪些,今天隨著課程的學習,又加深了跨域的理解,以此記錄下來。 AJAX跨域完全講解 今天在慕課網上學習了AJAX跨域完全講解:https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經有過AJAX跨域...
摘要:跨域完全講解今天在慕課網上學習了跨域完全講解我在收集面試題的時候其實就已經有過跨域的問題的了,當時候知道了為什么會存在跨域,以及跨域解決的方案有哪些,今天隨著課程的學習,又加深了跨域的理解,以此記錄下來。 AJAX跨域完全講解 今天在慕課網上學習了AJAX跨域完全講解:https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經有過AJAX跨域...
摘要:跨域問題經常需要面對,前端需要做的比較直接要么選擇異步提交,或者,要么表單提交基本可以搞定大部分跨域問題,但問題也比較明顯,只能通過方式提交并且是通過把參數拼到上提交請求的但是所有瀏覽器有長度限制,不同瀏覽器長度限制不一樣當出現要提交大段落 跨域問題經常需要面對,前端需要做的比較直接要么選擇ajax異步提交,XML或者jsonp,要么表單提交 jsonp基本可以搞定大部分跨域問題,但問...
閱讀 2386·2021-09-22 16:01
閱讀 3153·2021-09-22 15:41
閱讀 1171·2021-08-30 09:48
閱讀 490·2019-08-30 15:52
閱讀 3324·2019-08-30 13:57
閱讀 1713·2019-08-30 13:55
閱讀 3649·2019-08-30 11:25
閱讀 757·2019-08-29 17:25