這篇文章給大家介紹Angular如何通過CORS實(shí)現(xiàn)跨域方案，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

成都創(chuàng)新互聯(lián)公司企業(yè)建站,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對(duì)于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動(dòng)的思維在網(wǎng)頁中充分展現(xiàn)，通過對(duì)客戶行業(yè)精準(zhǔn)市場調(diào)研，為客戶提供的解決方案。

就拿iframe來說作為一個(gè)前端工程師,我極為討厭iframe這種東西.它不光增加了性能上的高負(fù)荷,同時(shí)也不利于掌控。

在Angular應(yīng)用中實(shí)現(xiàn)跨域的方式相對(duì)簡單,基本上通過兩種方式即可.一種是JSONP,另一種是通過CORS.前者是相對(duì)比較老的手法,后者我感覺更加給力一點(diǎn),所以主要說一下Angular如何與CORS配合跨域.

能不使用JSONP就盡量不使用,這是著手于Angular跨域的一個(gè)原則吧.不管怎么說,script的標(biāo)簽嵌入感覺還是low了點(diǎn).

Angular推崇的時(shí)前后端分離,所以跨域由哪一方實(shí)現(xiàn)成為一個(gè)問題.這個(gè)就不得不說前端技術(shù)上的局限性,即使是相對(duì)好用的JSONP對(duì)于非GET請(qǐng)求也是無能為力的,因?yàn)樗举|(zhì)上還是通過script去get一些資源.

JSONP這種只能GET的限制,在Angular推崇RESTful風(fēng)格接口的API場景下,就完全制約了它的使用,總不能棄POST和PUT那些不管.并且JSONP的錯(cuò)誤處理很弱,不盡人意.總之前端實(shí)現(xiàn)跨域都有各種各樣的局限性,又比如像document.domain則只能用于主域相同,子域不同的情況.

所以總結(jié)而言,雖然前端有多種方式處理跨域,但是多而不精,缺點(diǎn)都比較明顯.相對(duì)而言更好的方式是通過后端參與處理,這樣做不僅適用性更強(qiáng),同時(shí)前端只要發(fā)送正常的Ajax請(qǐng)求即可.這樣的技術(shù)叫做CORS.

Cross-Origin Resource Sharing跨域資源共享,應(yīng)該算是現(xiàn)在最為推薦的跨域處理方案.不僅適用于各種Method,而且更加方便和簡單.當(dāng)然了,這么吊的東西只有現(xiàn)代瀏覽器支持,IE8一下的老古董就不要想了.

CORS實(shí)現(xiàn)原理

雖然通過CORS實(shí)現(xiàn)跨域基本上完全由后端實(shí)現(xiàn),不過身為一個(gè)給力的前端.還是要掌握一下這一原理,以便當(dāng)你遇到不靠譜的后端時(shí),不至于...你懂得

CORS的本質(zhì)讓服務(wù)器通過新增響應(yīng)頭Access-Control-Allow-Origin,通過HTTP方式來實(shí)現(xiàn)資源共享,讓每個(gè)請(qǐng)求的服務(wù)直接返回資源.它使用了HTTP交互方式來確定請(qǐng)求源是否有資格請(qǐng)求該資源,并且通過設(shè)置HTTP Header來控制訪問資源的權(quán)限.

具體的過程是這樣的前端發(fā)送一個(gè)正常的請(qǐng)求:

$http.get('www.cros.com/api/data',{params:{    name: '頑Shi' }})

后端設(shè)置一下response的header:

Access-Control-Allow-Origin: "*" Access-Control-Allow-Methods: "GET" Access-Control-Max-Age: "60"

然后你觀察一下瀏覽器的行為會(huì)發(fā)現(xiàn)有趣的事,瀏覽器在沒有你干預(yù)的情況下,發(fā)現(xiàn)這是一個(gè)跨域請(qǐng)求.所以它沒有直接發(fā)送GET請(qǐng)求,而是發(fā)送了一個(gè)OPTIONS請(qǐng)求詢問是否可以跨域訪問該資源,這個(gè)過程我們可以稱之為"預(yù)檢".

然后我們看到OPTIONS的response返回了類似下面的信息:

HTTP/1.1 200 OK    Date: Mon, 01 Dec 2013 01:15:39 GMT  Server: Apache/2.0.61 (Unix)  Access-Control-Allow-Origin: *  Access-Control-Allow-Methods: GET  Access-Control-Max-Age: 60  Content-Encoding: gzip  Content-Length: 0  Connection: Keep-Alive  Content-Type: text/text

這里的這幾個(gè)Access頭的內(nèi)容就是服務(wù)器后端加上去的,它告訴了瀏覽器此后的60秒內(nèi),所有域都可以通過GET方法進(jìn)行跨域訪問該資源.然后瀏覽器自動(dòng)再次發(fā)送了真正的GET請(qǐng)求,并返回對(duì)應(yīng)的結(jié)果.

注意這一過程是瀏覽器自動(dòng)實(shí)現(xiàn)的,這一點(diǎn)是不是非常棒.一些header信息的設(shè)置如下:

Access-Control-Allow-Origin: <origin> | * // 授權(quán)的源控制  Access-Control-Max-Age: <delta-seconds> // 授權(quán)的時(shí)間  Access-Control-Allow-Credentials: true | false // 控制是否開啟與Ajax的Cookie提交方式  Access-Control-Allow-Methods: <method>[, <method>]* // 允許請(qǐng)求的HTTP Method  Access-Control-Allow-Headers: <field-name>[, <field-name>]* // 控制哪些header能發(fā)送真正的請(qǐng)求

這里還有一處需要前端工程師協(xié)作的地方就是cookie的傳遞,默認(rèn)情況下通過CORS這樣的方式是不會(huì)傳遞cookie.一般強(qiáng)制性將cookie添加到header的做法,也會(huì)被瀏覽器拒絕并報(bào)錯(cuò).上面看到了在服務(wù)器端會(huì)通過添加一個(gè)response頭,Access-Control-Allow-Credentials來控制是否允許Cookie的提交.

在Angular中我們需要進(jìn)行一些設(shè)置達(dá)到目的:

$http.post(url, {withCredentials: true, ...})  // 或者  $http({withCredentials: true, ...}).post(...)  // 或者  .config(function ($httpProvider) {    $httpProvider.defaults.withCredentials = true;  }

如果是jQuery則要設(shè)置如下:

$.ajax("www.cros.com/api/data", {    type: "GET",    xhrFields: {      withCredentials: true   },    crossDomain: true,    success: function(data, status, xhr) {    }  });

CORS的過程描述完畢,在網(wǎng)上找到一張圖片:

CORS的分類

如果仔細(xì)觀察瀏覽器的行為會(huì)發(fā)現(xiàn),并不是所有的跨域請(qǐng)求都會(huì)發(fā)送OPTIONS請(qǐng)求.是不是有些奇怪,這就涉及到CORS的分類,簡單請(qǐng)求和復(fù)雜請(qǐng)求.

HTTP的header通常包含下面這些內(nèi)容:

Accept  Accept-Language  Content-Language  Last-Event-ID  Content-Type的值僅是下列之一:                       application/x-www-form-urlencoded                       multipart/form-data                       text/plain

HTTP方法是HEAD,GET,POST之一,同時(shí)HTTP的header包含如上面所示.任何一個(gè)不滿足這兩種要求的請(qǐng)求,都是復(fù)雜請(qǐng)求.比如發(fā)送PUT,DELETE等HTTP動(dòng)作,或者Content-Type: application/json的內(nèi)容.

只有復(fù)雜請(qǐng)求包含"預(yù)檢"這一動(dòng)作,另外Access-Control-Max-Age應(yīng)該也會(huì)影響OPTIONS請(qǐng)求的發(fā)送.

關(guān)于Angular如何通過CORS實(shí)現(xiàn)跨域方案就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：Angular如何通過CORS實(shí)現(xiàn)跨域方案
URL鏈接：http://vcdvsql.cn/article12/pcccdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站收錄、搜索引擎優(yōu)化、網(wǎng)站制作、Google、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)