常見的跨域解決方案(一)

JSONP 解決跨域

JSONP跨越的優缺點

• 缺點：JSONP跨域只支持get請求方式同時可能會收到XSS攻擊
• 優勢：兼容性好

實現過程

• 聲明一個回調函數，函數的形參爲跨域服務器返回的數據
• 將請求的url賦值給script的src屬性，同時將回調函數的名稱做爲參數傳入（經過？傳參）
• 服務器須要將回調函數名和返回的數據拼接成字符串返回
• 客戶端接收到數據執行回調函數，處理數據

CORS解決跨域

CORS跨域的優缺點

• 優勢：支持全部請求方式，保證請求安全性
• 缺點：不支持IE8如下瀏覽器

實現

• 主要由後端實現，服務器設置 Access-Control-Allow-Origin ,該屬性表示容許哪一個域名訪問,*代碼容許全部
• 前端發送post請求時須要設置Content-Type 爲application/x-www-form-urlencoded

postMessage解決跨域

postMessage()是html5提供的API

// 參數1: 傳遞的數據
// 參數2: 請求的協議+域名+端口號+[url],字符串形式
// 參數3: 可選參數,Transferable對象,該參數會將Transerable對象的全部權轉移給接收方,發送方失去控制權
otherWindow.postMessage(message,targetOrigin,[transfer])
複製代碼