跨域知多少？

前言

已經好久沒寫博客了，最近的工做之餘就是在看書和彌補前端知識體系。想了想本身年初暗下決心說要養成長期編寫博客的習慣，想了下就圍繞着今天的主體「跨域」來說解吧！文中若有錯誤，還請指出，感激涕零！

什麼是跨域？

跨域資源共享（英語：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依靠着豐富的策略項，讓開發者以最小的代價知足日漸複雜的跨域需求，基本上已經是目前最經常使用的跨域手段了。 同時，代理跨域方式也很常見，此方案一般在知足跨域需求的同時也一併解決了其餘的諸多需求。 好比如今超級火爆的微服務架構。經過在代理服務器配置一個統一網關，讓全部客戶端請求所有歸集到此代理服務器上， 再經過此代理服務器對各個請求進行服務分發執行。這種方式解決了後端的單應用服務的壓力，也解決了前端配置多個請求地址的繁瑣工做， 還保障了服務器的安全，後續的橫向拓展也極其方便。