跨域解決方案

因為瀏覽器出於安全考慮，有同源策略。也就是說，如果協議、網域名稱或者埠有乙個不同就是跨域，ajax 請求會失敗。

那麼是出於什麼安全考慮才會引入這種機制呢？其實主要是用來防止 csrf 攻擊的。簡單點說，csrf 攻擊是利用使用者的登入態發起惡意請求。

也就是說，沒有同源策略的情況下，a **可以被任意其他**的 ajax 訪問到內容。如果你當前 a **還存在登入態，那麼對方就可以通過 ajax 獲得你的任何資訊。當然跨域並不能完全阻止 csrf。

然後我們來考慮乙個問題，請求跨域了，那麼請求到底發出去沒有？請求必然是發出去了，但是瀏覽器攔截了響應。你可能會疑問明明通過表單的方式可以發起跨域請求，為什麼 ajax 就不會。因為歸根結底，跨域是為了阻止使用者讀取到另乙個網域名稱下的內容，ajax 可以獲取響應，瀏覽器認為這不安全，所以攔截了響應。但是表單並不會獲取新的內容，所以可以發起跨域請求。同時也說明了跨域並不能完全阻止 csrf，因為請求畢竟是發出去了。

jsonp 的原理很簡單，就是利用cors 需要瀏覽器和後端同時支援。ie 8 和 9 需要通過xdomainrequest來實現。

瀏覽器會自動進行 cors 通訊，實現 cors 通訊的關鍵是後端。只要後端實現了 cors，就實現了跨域。

服務端設定access-control-allow-origin就可以開啟 cors。該屬性表示哪些網域名稱可以訪問資源，如果設定萬用字元則表示所有**都可以訪問資源。

雖然設定 cors 和前端沒什麼關係，但是通過這種方式解決跨域問題的話，會在傳送請求時出現兩種情況，分別為簡單請求和複雜請求。

簡單請求

以 ajax 為例，當滿足以下條件時，會觸發簡單請求

使用下列方法之一：

content-type的值僅限於下列三者之一：

請求中的任意xmlhttprequestupload物件均沒有註冊任何事件***；xmlhttprequestupload物件可以使用xmlhttprequest.upload屬性訪問。

該方式只能用於二級網域名稱相同的情況下，比如a.test.com和b.test.com適用於該方式。

只需要給頁面新增document.domain = 'test.com'表示二級網域名稱都相同就可以實現跨域

這種方式通常用於獲取嵌入頁面中的第三方頁面資料。乙個頁面傳送訊息，另乙個頁面判斷**並接收訊息

// 傳送訊息端
window.parent.postmessage('message', '')
// 接收訊息端
var mc = new messagechannel()
mc.addeventlistener('message', event => 
})

跨域解決方案

跨域解決方案

跨域解決方案

跨域解決方案

相關推薦