前端面試11 通訊類

2021-09-11 12:12:47 字數 1726 閱讀 3088

乙個域下的文件或指令碼試圖去請求另乙個域下的資源

同源:協議、網域名稱、埠

非同源的限制:

cookie、localstorage、indexdb無法讀取

dom無法獲得

ajax 請求不能傳送

ajax : 同源下的通訊方式

websocket:不受同源策略限制

cors:支援跨域通訊,也支援同源通訊

// 完整版

function ajax(opt)

if (type === 'get')

if (type === 'post')

xhr.onload = function ()

}} else }};

}// 簡易版,只考慮get方式

/** * 監聽服務端跟客戶端通訊的過程和進度

*/xhr.onreadystatechange = function () else

}}xhr.send();//發起客戶端請求

複製**

場景:兩個網頁一級網域名稱相同,只是二級網域名稱不同

方案:瀏覽器允許通過設定document.domain共享 cookie。這種方法只適用於 cookie 和 iframe 視窗,localstorage 和 indexdb 無法通過這種方法

// 客戶端實現:// 服務端(返回時即執行全域性函式)

onback()

複製**

場景:當前頁面 a 通過iframe或frame嵌入了跨域的頁面 b

// 在a中偽**如下:

var b = document.getelementsbytagname('iframe');

b.src = b.src + '#' + 'data';

// 在b中的偽**如下:

window.onhashchange = function () ;

複製**

html5引入跨文件通訊api,這個api為window物件新增了乙個window.postmessage方法,允許跨視窗通訊,不論這兩個視窗是否同源

// 例如,視窗a(http:a.com)向跨域的視窗b(http:b.com)傳送資訊

var popup = window.open('', 'title');

popup.postmessage('hello world!', '');

// 在視窗b中監聽

window.addeventlistener('message', function (event) , false);

複製**

var ws = new websocket('wss:');

ws.onopen = function (evt) ;

ws.onmessage = function (evt) ;

ws.onclose = function (evt) ;

複製**

fetch('/some/url/', ).then(function (response) ).catch(function (err) );

複製**

前端面試(6) 通訊類

同源策略 限制從乙個源載入的文件或指令碼如何與另乙個源的資源進行互動。這是乙個用於隔離潛在惡意檔案的關鍵的安全機制。限制 ajax的請求封裝 如果是get請求就設定url位址問號引數 if method get xhr.open method,url 如果是post請求就設定請求體 var data...

前端面試http協議類總結

http協議的主要特點 http方法 http的報文組成請求頭 鍵值對 服務端據此獲取客戶端的資訊 空行 分隔請求頭和請求體 請求體 通過請求體傳值 響應報文 狀態行 說明所請求的資源情況 響應頭 描述伺服器基本資訊 空行 分隔響應頭和響應體 響應體 服務端返回的資料 post和get的區別 htt...

知識梳理 3 8通訊類

源 協議 http 網域名稱 www.example.com 埠 80 同源策略限制從乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。目的 這是乙個用於隔離潛在惡意檔案的關鍵的安全機制。限制範圍 可以跨域的三個標籤 原理 通過script標籤的非同步載入實現的 jsonp 1.瀏覽器傳送請...