Angular通過CORS實現跨域方案

2021-06-25 23:15:24 字數 3339 閱讀 8123

就拿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的本質讓伺服器通過新增響應頭ac

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

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

後端設定一下response的header:

access-control-allow-origin: "*"

access-control-allow-methods: "get"

access-control-max-age: "60"

然後你觀察一下瀏覽器的行為會發現有趣的事,瀏覽器在沒有你干預的情況下,發現這是乙個跨域請求.所以它沒有直接傳送get請求,而是傳送了乙個options請求詢問是否可以跨域訪問該資源,這個過程我們可以稱之為"預檢".

然後我們看到options的response返回了類似下面的資訊:

這裡的這幾個ac

cess頭的內容就是伺服器後端加上去的,它告訴了瀏覽器此後的60秒內,所有域都可以通過get方法進行跨域訪問該資源.然後瀏覽器自動再次傳送了真正的get請求,並返回對應的結果.

注意這一過程是瀏覽器自動實現的,這一點是不是非常棒.一些header資訊的設定如下:

access-control-allow-origin:| * // 授權的源控制

access-control-max-age:// 授權的時間

access-control-allow-credentials: true | false // 控制是否開啟與ajax的cookie提交方式

access-control-allow-methods:[,]* // 允許請求的http method

access-control-allow-headers:[,]* // 控制哪些header能傳送真正的請求

這裡還有一處需要前端工程師協作的地方就是cookie的傳遞,預設情況下通過cors這樣的方式是不會傳遞cookie.一般強制性將cookie新增到header的做法,也會被瀏覽器拒絕並報錯.上面看到了在伺服器端會通過新增乙個response頭,ac

cess-control-allow-credentials來控制是否允許cookie的提交.

在angular中我們需要進行一些設定達到目的:

// 或者

// 或者

如果是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請求的傳送.

Angular通過CORS實現跨域方案

就拿iframe來說作為乙個前端工程師,我極為討厭iframe這種東西.它不光增加了效能上的高負荷,同時也不利於掌控.在angular應用中實現跨域的方式相對簡單,基本上通過兩種方式即可.一種是jsonp,另一種是通過cors.前者是相對比較老的手法,後者我感覺更加給力一點,所以本文主要說一下ang...

Nginx通過CORS配置實現跨域訪問

cors cross origin resource sharing 跨域資源共享 是指a頁面想獲得b頁面的資源,如果a b頁面的協議 網域名稱 埠 子網域名稱不同,所進行的的訪問都是進行跨域的,而瀏覽器為了安全考慮,對跨域訪問一般都是進行了限制的。需要注意的是,cors需要瀏覽器和伺服器同時支援。...

CORS實現原理

cors,跨域資源共享,需要瀏覽器和伺服器同時支援,基本思想為使用自定義的http頭部讓瀏覽器和伺服器通訊 瀏覽器將cors分為兩類 瀏覽器直接發出cors請求,在頭資訊中新增乙個origin欄位,用來說明請求來自哪個源,伺服器根據這個值,決定是否同意這次請求 會在正式通訊前,增加一次options...