跨域

來自專欄 前端

為什麼會產生跨域？

scheme、host、port不同

常用的跨域方案有哪些？

1、瀏覽器原生標籤，img/link/script不受跨域限制。

img：常用於前端點擊流上報。

script：衍生出了jsonp的方案。

jsonp的具體實現過程？後台需要提供一個jsonp介面，請求方式是GET。這個介面接收一個callback作為參數，是一個函數名稱。介面做完相應的業務處理後，返回一個字元串，這個字元串類似於callback({ k1: v1, k2: v2 })，callback需要替換為接收到的函數名，參數傳入相應的數據。前端一旦要發起jsonp請求，需要註冊一個全局函數，並把函數名作為jsonp介面的callback參數，動態創建一個script標籤，設置src為組裝好的url，把script標籤掛載到文檔，等待script標籤載入完後，會調用之前註冊好的全局函數，函數參數便是後端返回的數據。缺點：jsonp只能用於GET介面。

2、後端代理。

// TODO

3、CORS。

// TODO

4、postMessage和iframe結合。

// TODO

5、window.name和iframe結合。

// TODO

推薦閱讀：