js跨域問題
阿新 • • 發佈:2018-09-29
字符串 r script err 周期 t對象 str 實現 col function js跨域:域名、端口、協議有一個不同便是跨域。
1.CORS
CORS(Corss-Origin Resource Sharing,跨資源共享),基本思想是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通,從而決定請求或響應的成功或失敗。即給請求附加一個額外的Origin頭部,其中包含請求頁面的源信息(協議、域名和端口),以便服務器根據這個頭部決定是否給予響應。
2.document.domain
將頁面的document.domain設置為相同的值,頁面間可以互相訪問對方的JavaScript對象。
註意:
不能將值設置為URL中不包含的域;
松散的域名不能再設置為緊繃的域名。
3.圖像Ping
var img=new Image();
img.onload=img.onerror=function(){
... ...
}
img.src="url?name=value";
請求數據通過查詢字符串的形式發送,響應可以是任意內容,通常是像素圖或204響應。
圖像Ping最常用於跟蹤用戶點擊頁面或動態廣告曝光次數。
缺點:
只能發送GET請求;
無法訪問服務器的響應文本,只能用於瀏覽器與服務器間的單向通信。
4.Jsonp
var script=document.createElement("script");
script.src="url?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
JSONP由兩部分組成:回調函數和數據
回調函數是接收到響應時應該在頁面中調用的函數,其名字一般在請求中指定。
數據是傳入回調函數中的JSON數據。
優點:
能夠直接訪問響應文本,可用於瀏覽器與服務器間的雙向通信。
缺點:
JSONP從其他域中加載代碼執行,其他域可能不安全;
難以確定JSONP請求是否失敗。
5.Comet
Comet可實現服務器向瀏覽器推送數據。
Comet是實現方式:長輪詢和流
短輪詢即瀏覽器定時向服務器發送請求,看有沒有數據更新。
長輪詢即瀏覽器向服務器發送一個請求,然後服務器一直保持連接打開,直到有數據可發送。發送完數據後,瀏覽器關閉連接,隨即又向服務器發起一個新請求。其優點是所有瀏覽器都支持,使用XHR對象和setTimeout()即可實現。
流即瀏覽器向服務器發送一個請求,而服務器保持連接打開,然後周期性地向瀏覽器發送數據,頁面的整個生命周期內只使用一個HTTP連接。
6.WebSocket
WebSocket可在一個單獨的持久連接上提供全雙工、雙向通信。
WebSocket使用自定義協議,未加密的連接時ws://;加密的鏈接是wss://。
var webSocket=new WebSocket("ws://");
webSocket.send(message);
webSocket.onmessage=function(event){
var data=event.data;
... ....
}
註意:
必須給WebSocket構造函數傳入絕對URL;
WebSocket可以打開任何站點的連接,是否會與某個域中的頁面通信,完全取決於服務器;
WebSocket只能發送純文本數據,對於復雜的數據結構,在發送之前必須進行序列化JSON.stringify(message))。
優點:
在客戶端和服務器之間發送非常少的數據,減少字節開銷。
參考Mr.Apple
js跨域問題