jsonp跨域原理_九種跨域方式實作原理（完整版）

作者：浪裡行舟

前言

前後端資料互動經常會碰到請求跨域，什麼是跨域，以及有哪幾種跨域方式，這是本文要探讨的内容。

本文完整的源代碼請猛戳github部落格，紙上得來終覺淺，建議動手敲敲代碼

一、什麼是跨域？

1.什麼是同源政策及其限制内容？

同源政策是一種約定，它是浏覽器最核心也最基本的安全功能，如果缺少了同源政策，浏覽器很容易受到XSS、CSRF等攻擊。所謂同源是指"協定+域名+端口"三者相同，即便兩個不同的域名指向同一個ip位址，也非同源。

同源政策限制内容有：

• Cookie、LocalStorage、IndexedDB 等存儲性内容
• DOM 節點
• AJAX 請求發送後，結果被浏覽器攔截了

但是有三個标簽是允許跨域加載資源：

• 

2.常見跨域場景

當協定、子域名、主域名、端口号中任意一個不相同時，都算作不同域。不同域之間互相請求資源，就算作“跨域”。常見跨域場景如下圖所示：

特别說明兩點：

第一：如果是協定和端口造成的跨域問題“前台”是無能為力的。

第二：在跨域問題上，僅僅是通過“URL的首部”來識别而不會根據域名對應的IP位址是否相同來判斷。“URL的首部”可以了解為“協定, 域名和端口必須比對”。

這裡你或許有個疑問：請求跨域了，那麼請求到底發出去沒有？

跨域并不是請求發不出去，請求能發出去，服務端能收到請求并正常傳回結果，隻是結果被浏覽器攔截了。你可能會疑問明明通過表單的方式可以發起跨域請求，為什麼 Ajax 就不會?因為歸根結底，跨域是為了阻止使用者讀取到另一個域名下的内容，Ajax 可以擷取響應，浏覽器認為這不安全，是以攔截了響應。但是表單并不會擷取新的内容，是以可以發起跨域請求。同時也說明了跨域并不能完全阻止 CSRF，因為請求畢竟是發出去了。

二、跨域解決方案

1.jsonp

1) JSONP原理

利用