前言
已經很久沒寫部落格了，最近的工作之餘就是在看書和彌補前端知識體系。想了想自己年初暗下決心說要養成長期編寫部落格的習慣，想了下就圍繞著今天的主體“跨域”來講解吧！文中如有錯誤，還請指出，感激不盡！
什麼是跨域？
跨域資源共享（英語：Cross-origin resource sharing，縮寫：CORS），用於讓網頁的受限資源能夠被其他域名的頁面訪問的一種機制。 --摘自維基百科
跨域的基本三要素:
- 同域名
- 同埠
- 同協議
通俗理解:
我們從站點A對其他站點進行網路請求時，瀏覽器端和服務端需要對這個請求進行處理，保證這個請求是安全的。 這個處理就是跨域
為什麼需要跨域
跨域是為了保證請求的安全作出的策略。
瀏覽器請求必須遵循同源策略: 同一域名、同一埠、同一協議
跨域方案
- JSONP跨域
- CORS跨域
- 代理跨域
JSONP跨域
JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域資料互動協議。
理解JSONP跨域前，回憶下我們在前端是不是有下面的編碼經歷。
引用script元素通過設定src獲取到第三方的js指令碼過？
還有我們的img元素也可以通過給src屬性賦予url的方式獲取其他第三方伺服器上的圖片資源？
上面獲取資料的方式就是採用JSONP。
通俗而言，JSONP就是通過呼叫一個服務端的get介面返回帶有引用前端方法的字串。
畫了一個草圖，希望大家能通過它看懂客戶端和服務端通過JSONP是如何互動的：
上面案例執行結果如下:
JSONP跨域特點
- 只支援Http請求的Get方式
- 後端、前端都需要編碼
- 安全係數低
- 程式碼難以維護
CORS跨域
CORS跨域個人是最常用的(多虧.NET Core對跨域策略的支援非常好用)。
CORS跨域是由服務端應用設定的一個跨域策略，比如開放指定的HTTP Method、指定請求方Url、指定請求攜帶的Headers必須包含的欄位等等~。
CORS這種方式簡單高效，合理的使用它的策略可以保證伺服器的安全的同時也提升了前後端的開發體驗~；
CORS跨域特點
- 後端配置，前端直接請求;
- 策略豐富，可支援多種策略，如HTTP方法、URL等;
- 前後端互動方式非常規範；
- 除了常用的GET、POST、HEAD 其他方法進行請求則需要發起OPTIONS請求對伺服器端進行跨域允許的許可請求。
代理跨域
代理跨域非常好理解，通俗的說就是客戶端請求到A地址，A地址的服務直接將客戶端請求重定向到B地址，最終由B地址對客戶端的請求進行處理。
介面代理跨域特點
- 服務端、客戶端均不需要配置
- 通過中間伺服器(代理伺服器)的配置實現(如Nginx、IIS、Apache)
小結
JSONP方式看似簡單，實際可行性非常差，目前在Web開發前後端分離的大背景下此方案已經算是銷聲匿跡了。
而CORS依靠著豐富的策略項，讓開發者以最小的代價滿足日漸複雜的跨域需求，基本上已是目前最常用的跨域手段了。
同時，代理跨域方式也很常見，此方案通常在滿足跨域需求的同時也一併解決了其他的諸多需求。
比如現在超級火爆的微服務架構。通過在代理伺服器配置一個統一閘道器，讓所有客戶端請求全部歸集到此代理伺服器上，
再通過此代理伺服器對各個請求進行服務分發執行。這種方式解決了後端的單應用服務的壓力，也解決了前端配置多個請求地址的繁瑣工作，
還保障了伺服器的安全，後續的橫向擴充也極其方便。