就拿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: "*"然後你觀察一下瀏覽器的行為會發現有趣的事,瀏覽器在沒有你干預的情況下,發現這是乙個跨域請求.所以它沒有直接傳送get請求,而是傳送了乙個options請求詢問是否可以跨域訪問該資源,這個過程我們可以稱之為"預檢".access-control-allow-methods: "get"
access-control-max-age: "60"
然後我們看到options的response返回了類似下面的資訊:
這裡的這幾個ac
cess頭的內容就是伺服器後端加上去的,它告訴了瀏覽器此後的60秒內,所有域都可以通過get方法進行跨域訪問該資源.然後瀏覽器自動再次傳送了真正的get請求,並返回對應的結果.
注意這一過程是瀏覽器自動實現的,這一點是不是非常棒.一些header資訊的設定如下:
access-control-allow-origin:| * // 授權的源控制這裡還有一處需要前端工程師協作的地方就是cookie的傳遞,預設情況下通過cors這樣的方式是不會傳遞cookie.一般強制性將cookie新增到header的做法,也會被瀏覽器拒絕並報錯.上面看到了在伺服器端會通過新增乙個response頭,acaccess-control-max-age:// 授權的時間
access-control-allow-credentials: true | false // 控制是否開啟與ajax的cookie提交方式
access-control-allow-methods:[,]* // 允許請求的http method
access-control-allow-headers:[,]* // 控制哪些header能傳送真正的請求
cess-control-allow-credentials來控制是否允許cookie的提交.
在angular中我們需要進行一些設定達到目的:
// 或者
// 或者
如果是jquery則要設定如下:
});cors的過程描述完畢,在網上找到一張:
cors的分類
如果仔細觀察瀏覽器的行為會發現,並不是所有的跨域請求都會傳送options請求.是不是有些奇怪,這就涉及到cors的分類,簡單請求和複雜請求.
http的header通常包含下面這些內容:
accept只有複雜請求包含"預檢"這一動作,另外access-control-max-ageaccept-language
content-language
last-event-id
content-type的值僅是下列之一:
multipart/form-data
text/plain
應該也會影響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...