詳解基于angular-cli配置代理解決跨域請(qǐng)求問(wèn)題-創(chuàng)新互聯(lián)

1.跨域請(qǐng)求產(chǎn)生

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供市北企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都做網(wǎng)站、H5建站、小程序制作等業(yè)務(wù)。10年已為市北眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

隨著不同終端(Pad/Mobile/PC)的興起，對(duì)開(kāi)發(fā)人員的要求越來(lái)越高，純?yōu)g覽器端的響應(yīng)式已經(jīng)不能滿足用戶體驗(yàn)的高要求，我們往往需要針對(duì)不同的終端開(kāi)發(fā)定制的版本。為了提升開(kāi)發(fā)效率，前后端分離的需求越來(lái)越被重視，后端負(fù)責(zé)業(yè)務(wù)/數(shù)據(jù)接口，前端負(fù)責(zé)展現(xiàn)/交互邏輯，同一份數(shù)據(jù)接口，我們可以定制開(kāi)發(fā)多個(gè)版本。

而前后端分離帶來(lái)的一個(gè)問(wèn)題就是前端web部署的服務(wù)器和后端提供服務(wù)的服務(wù)器大概率不在同一個(gè)域名下，進(jìn)而會(huì)產(chǎn)生跨域問(wèn)題。

2.通用解決方案

如果瀏覽器支持HTML5，那么就可以一勞永逸地使用新的跨域策略：CORS了。

CORS全稱Cross-Origin Resource Sharing，是html5規(guī)范定義的如何跨域訪問(wèn)資源。

了解CORS前，我們先搞明白概念：

Origin表示本域，也就是瀏覽器當(dāng)前頁(yè)面的域。當(dāng)JavaScript向外域（如sina.com）發(fā)起請(qǐng)求后，瀏覽器收到響應(yīng)后，首先檢查Access-Control-Allow-Origin是否包含本域，如果是，則此次跨域請(qǐng)求成功，如果不是，則請(qǐng)求失敗，javascript將無(wú)法獲取到響應(yīng)的任何數(shù)據(jù)。

用一個(gè)圖來(lái)表示就是：

假設(shè)本域是my.com，外域是sina.com，只要響應(yīng)頭Access-Control-Allow-Origin為http://my.com，或者是*，本次請(qǐng)求就可以成功。

可見(jiàn)，跨域能否成功，取決于對(duì)方服務(wù)器是否愿意給你設(shè)置一個(gè)正確的Access-Control-Allow-Origin，決定權(quán)始終在對(duì)方手中。

上面這種跨域請(qǐng)求，稱之為“簡(jiǎn)單請(qǐng)求”。簡(jiǎn)單請(qǐng)求包括GET、HEAD和POST（POST的Content-Type類型僅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出現(xiàn)任何自定義頭（例如，X-Custom: 12345），通常能滿足90%的需求。

無(wú)論你是否需要用JavaScript通過(guò)CORS跨域請(qǐng)求資源，你都要了解CORS的原理。最新的瀏覽器全面支持Html5。在引用外域資源時(shí)，除了JavaScript和CSS外，都要驗(yàn)證CORS。

瀏覽器確認(rèn)服務(wù)器響應(yīng)的Access-Control-Allow-Methods頭確實(shí)包含將要發(fā)送的AJAX請(qǐng)求的Method，才會(huì)繼續(xù)發(fā)送AJAX，否則，拋出一個(gè)錯(cuò)誤。

由于以POST、PUT方式傳送JSON格式的數(shù)據(jù)在REST中很常見(jiàn)，所以要跨域正確處理POST和PUT請(qǐng)求，服務(wù)器端必須正確響應(yīng)OPTIONS請(qǐng)求。

需要深入了解CORS的童鞋請(qǐng)移步W3C文檔。

3.angular-cli代理配置解決跨域請(qǐng)求問(wèn)題

使用CORS的確是可以很好的解決跨域問(wèn)題，但是需要后端開(kāi)發(fā)人員配合，如果想在不修改后端代碼的前提下解決問(wèn)題，配置代理絕對(duì)是不二選擇。

使用tomcat、nginx…配置代理當(dāng)然可以，但是麻煩，需要先打包代碼再部署到nginx（或者其他）中，才能測(cè)試使用，為了保證開(kāi)發(fā)效率，我們希望代碼能夠即寫即測(cè)，這時(shí)在angular-cli中配置代理的優(yōu)勢(shì)就先露無(wú)疑。

在angular的開(kāi)發(fā)中，angular-cli非常的方便，強(qiáng)烈推薦使用，今天我們主要講述一下angular-cli如何通過(guò)配置代理解決跨域請(qǐng)求問(wèn)題。

需要了解angular-cli的童鞋請(qǐng)移步angular-cli 官方文檔

假如你現(xiàn)在已經(jīng)使用angular-cli構(gòu)建你的項(xiàng)目，并且程序正常運(yùn)行，那么我們現(xiàn)在開(kāi)始配置cli的代理：

1.首先我們創(chuàng)建代理配置文件proxy.conf.json

假如你的后端服務(wù)的訪問(wèn)地址為“10.4.60.200:8080”,以下為proxy.conf.json的例子：

{
 "/api": {
 "target": "http://10.4.60.200:8080",
 "secure": false
 }
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.jbt999.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：詳解基于angular-cli配置代理解決跨域請(qǐng)求問(wèn)題-創(chuàng)新互聯(lián)
文章來(lái)源：http://www.jbt999.com/article44/ccgdhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、App開(kāi)發(fā)、用戶體驗(yàn)、網(wǎng)站改版、虛擬主機(jī)、ChatGPT

廣告

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