Angular通過CORS實現跨域方案

就拿iframe來說作為乙個前端工程師,我極為討厭iframe這種東西.它不光增加了效能上的高負荷,同時也不利於掌控.

在angular應用中實現跨域的方式相對簡單,基本上通過兩種方式即可.一種是jsonp,另一種是通過cors.前者是相對比較老的手法,後者我感覺更加給力一點,所以本文主要說一下angular如何與cors配合跨域.

能不使用jsonp就盡量不使用,這是著手於angular跨域的乙個原則吧.不管怎麼說,script的標籤嵌入感覺還是low了點.

angular推崇的時前後端分離,所以跨域由哪一方實現成為乙個問題.這個就不得不說前端技術上的侷限性,即使是相對好用的jsonp對於非get請求也是無能為力的,因為它本質上還是通過script去get一些資源.

jsonp這種只能get的限制,在angular推崇restful風格介面的api場景下,就完全制約了它的使用,總不能棄post和put那些不管.並且jsonp的錯誤處理很弱,不盡人意.總之前端實現跨域都有各種各樣的侷限性,又比如像document.domain則只能用於主域相同,子域不同的情況.

所以總結而言,雖然前端有多種方式處理跨域,但是多而不精,缺點都比較明顯.相對而言更好的方式是通過後端參與處理,這樣做不僅適用性更強,同時前端只要傳送正常的ajax請求即可.這樣的技術叫做cors.

cross-origin resource sharing跨域資源共享,應該算是現在最為推薦的跨域處理方案.不僅適用於各種method,而且更加方便和簡單.當然了,這麼吊的東西只有現代瀏覽器支援,ie8一下的老古董就不要想了.

cors實現原理

雖然通過cors實現跨域基本上完全由後端實現,不過身為乙個給力的前端.還是要掌握一下這一原理,以便當你遇到不靠譜的後端時,不至於...你懂得

cors的本質讓伺服器通過新增響應頭access-control-allow-origin,通過http方式來實現資源共享,讓每個請求的服務直接返回資源.它使用了http互動方式來確定請求源是否有資格請求該資源,並且通過設定http header來控制訪問資源的許可權.

具體的過程是這樣的前端傳送乙個正常的請求:

// 或者

如果是jquery則要設定如下:

cors的過程描述完畢,在網上找到一張:

cors的分類

如果仔細觀察瀏覽器的行為會發現,並不是所有的跨域請求都會傳送options請求.是不是有些奇怪,這就涉及到cors的分類,簡單請求和複雜請求.

http的header通常包含下面這些內容:

accept

accept-language

content-language

last-event-id

content-type的值僅是下列之一:

multipart/form-data

text/plain

只有複雜請求包含"預檢"這一動作,另外access-control-max-age應該也會影響options請求的傳送.