源:協議(http://)、網域名稱(www.example.com)、埠(80)
同源策略限制從乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。
目的:這是乙個用於隔離潛在惡意檔案的關鍵的安全機制。
限制範圍:
可以跨域的三個標籤:
原理:通過script標籤的非同步載入實現的;
//jsonp
//1.瀏覽器傳送請求,告訴服務端callback的名稱//2.伺服器響應下發script內容,callback的名稱作為函式名返回//**實現
/*** [function 在頁面中注入js指令碼]
*/util.createscript = function (url, charset) ;
//本地需要有以callback的名稱建立函式
util.jsonp = function (url, onsuccess, onerror, charset)
};var script = util.createscript(url + '&callback=' + callbackname, charset);
script.onload = script.onreadystatechange = function ()
// 刪除函式或變數
window[callbackname] = null;}};
script.onerror = function ()
};};
url位址中#後邊的叫hash,hash變動頁面不會重新整理(hash做跨域通訊的基本原理);
url位址中?後邊的叫search,search變動頁面會重新整理頁面,所以search不能做跨域通訊。
// hash
// 場景:當前頁面 a 通過iframe或frame嵌入了跨域的頁面 b,要給跨域的 b 傳送訊息
// 在a中偽**如下:
var b = document.getelementsbytagname('iframe');
b.src = b.src + '#' + 'data';//通過json.stringify()轉成字串'data'
// 在b中的偽**如下
window.onhashchange = function () ;
h5中新增加的實現跨域通訊的方式
// postmessage
// 場景:視窗a(http:a.com)向跨域的視窗b(http:b.com)傳送資訊
bwindow.postmessage('data', '');
// 在視窗b中監聽
awindow.addeventlistener('message', function (event) , false);
// websocket
var ws = new websocket('wss:');//ws非加密,wss加密
//傳送訊息onopen
ws.onopen = function (evt) ;
//接收訊息onmessage
ws.onmessage = function (evt) ;
//關閉連線
ws.onclose = function (evt) ;
新的通訊標準(通過新的api:fetch()實現cors通訊)。可以理解為:支援跨域通訊的ajax。當你在瀏覽器中傳送乙個ajax跨域請求時,瀏覽器會在http頭中加入乙個origin。如果只是乙個普通的ajax,跨域時就會被瀏覽器攔截。
// cors
// url(必選),options(可選)
fetch('/some/url/', ).then(function (response) ).catch(function (err) );
//注意:不同後端語言的寫法可能不一樣
//第二個引數填寫允許跨域的網域名稱城,不建議直接寫"*"
response.setheader("access-control-allow-origin","");
response.setheader("access-control-allow-headers", "x-requested-with");
response.addheader("access-control-allow-methods","get,post,put,delete,options");
//接受跨域的cookie
response.setheader("access-control-allow-credentials", "true");
類 知識梳理
建立類 下面是通過乙個例項來進行知識點小結。class dog def init self,name,age self.name name self.age age defsit self print self.name.title is now sitting.def roll over self...
前端面試11 通訊類
乙個域下的文件或指令碼試圖去請求另乙個域下的資源 同源 協議 網域名稱 埠 非同源的限制 cookie localstorage indexdb無法讀取 dom無法獲得 ajax 請求不能傳送 ajax 同源下的通訊方式 websocket 不受同源策略限制 cors 支援跨域通訊,也支援同源通訊 ...
前端面試(6) 通訊類
同源策略 限制從乙個源載入的文件或指令碼如何與另乙個源的資源進行互動。這是乙個用於隔離潛在惡意檔案的關鍵的安全機制。限制 ajax的請求封裝 如果是get請求就設定url位址問號引數 if method get xhr.open method,url 如果是post請求就設定請求體 var data...