摘要:面試必考題吧,所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮,提出了瀏覽器的同源策略做為解決方案。
面試必考題吧,所以在這會詳細介紹以下內容
跨域產生的原因
羅列最常用的解決方法
分析各種方法原理
羅列各種方法優缺點
什么是跨域由于瀏覽器廠商對安全性的考慮,提出了瀏覽器的同源策略做為解決方案。它是一個用于隔離潛在惡意文件的重要安全機制。同源即協議、域名、端口三者一致。不同源即跨域。
比如:當你訪問了 餅夕夕的網站
// HTML // 餅夕夕.com 內嵌 拼多多.com // JS // 由于沒有同源策略的限制,釣魚網站可以直接拿到別的網站的Dom // 所以 餅夕夕.com 可以在 拼多多.com 輸入賬號密碼處埋點 const $iframe = window.frames["pinduoduo"]; const $pwd = $iframe.document.getElementById("password"); console.log(`你的密碼已泄露: ${$pwd}`)解決方案(主流)
1. JSONP -> get請求跨域
原理:script和img等標簽沒有跨域限制
實現方案:(舉例)
// HTML 插入標簽 // JS function say(name, age) { console.log(`${name}, ${age} 歲`) } // 服務器返回response say("zmz", 18) // 那么客戶端在script onload時會執行say方法 // 結束
2. iframe+form實現post請求跨域
原理:利用form表單target屬性,將post請求提交給隱藏的iframe,使頁面不跳轉
var data = { name: "zmz", age: 18 } var url = "http://localhost/say"; var $iframe = document.createElement("iframe"); $iframe.name = "iframePost"; $iframe.style.display = "none"; document.body.appendChild($iframe); $iframe.addEventListener("load", function(e) { console.log($iframe.contentWindow) }) const form = document.createElement("form"); const ipt = document.createElement("input"); form.action = url; form.enctype = "application/json;" form.method = "post"; // 最核心的一行代碼 // 在指定的iframe中執行form form.target = $iframe.name; for (var name in data) { ipt.name = name; ipt.value = data[name]; form.appendChild(ipt.cloneNode()); } form.style.display = "none"; document.body.appendChild(form); form.submit(); document.body.removeChild(form)
3. CORS 跨源資源共享
原理:新版XMLHttpRequest(ajax2.0)特性,服務器白名單
服務器端設置response.setHeader("Access-Control-Allow-xxx...
附:ajax2.0新特性
可以設置HTTP請求的時限xhr.timeout
可以使用FormData對象管理表單數據
可以上傳文件 >> 同上
可以請求不同域名下的數據(跨域請求)
可以獲取服務器端的二進制數據xhr.responseType = "blob"
可以獲得數據傳輸的進度信息 xhr.upload.process
CORS分類
簡單請求(自行搜索)
在請求頭信息中指定Origin
非簡單請求
會發送預檢請求(options),返回狀態碼204
5. 代理
原理:服務器之間沒有跨域限制
具體實現:
// Nginx配置 server{ # 監聽9099端口 listen 9099; # 域名是localhost server_name localhost; # 匹配到都轉發到http://localhost:9871 location ^~ /api { proxy_pass http://localhost:9871; } }
5. postMessage
原理:postMessage可以處理各種瀏覽器窗口之間的通信問題。
具體實現:
// 發送方 window.frames["crossDomainIframe"] iframe.postMessage("我想要數據", "http://localhost:8088") window.addEventListener("message", function () { if (e.origin === "http://localhost:2333") { console.log("收到", e.data) } } // 接收方 window.addEventListener("message", (e) => { if (e.origin === "http://localhost:8088") { console.log(e.data) e.source.postMessage("給,你要的數據", e.origin); } })
6. WebSocket
原理:新協議(socket)
實現方案:類似postMessage
附:
socket.io框架能解決兼容性問題
各種方式對比
JSONP和iframe+from兼容性很好
但是錯誤處理和RESTful接口統一是個問題
CORS最簡單粗暴
9102年了。微軟都不維護Win7了。
代理
肯定會慢一丟丟咯,而且要找運維配
postMessage
處理窗口間通信,- -。不嫌麻煩可以用來跨域
WebSocket
處理長連接,附帶跨域
End文章分享同步于: https://github.com/zhongmeizh...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54747.html
摘要:在接觸前端開發起,跨域這個詞就一直以很高的頻率在我們學習工作中重復出現,最近在工作中遇到了跨域的相關問題,這里我把它總結記錄一下。 在接觸前端開發起,跨域這個詞就一直以很高的頻率在我們學習工作中重復出現,最近在工作中遇到了跨域的相關問題,這里我把它總結記錄一下。關于跨域,有N種類型,現在我只專注于ajax請求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹),內容...
摘要:跨域問題相信跨域問題是每個前端在請求中都會遇到的問題因為瀏覽器的同源策略的限制所以是不支持跨域的當然當后臺在沒有完成搭建的時候這時候我們需要使用到模擬數據的時候這時候很多的就會出現跨域問題在中當然這個問題也不例外如下所以在此我也就整理出了 跨域問題 相信跨域問題是每個前端在ajax請求中都會遇到的問題,因為瀏覽器的同源策略的限制,所以ajax是不支持跨域的,當然當后臺在沒有完成搭建的...
閱讀 2734·2021-09-02 15:11
閱讀 906·2019-08-26 18:18
閱讀 1867·2019-08-26 11:57
閱讀 3317·2019-08-23 16:59
閱讀 1994·2019-08-23 16:51
閱讀 2305·2019-08-23 16:11
閱讀 3120·2019-08-23 14:58
閱讀 1107·2019-08-23 11:34