背景

跨域是由瀏覽器的同源策略引起的，是指頁面請(qǐng)求的url地址，必須與瀏覽器上的url地址處于同域上(即域名，端口，協(xié)議相同)。

這是為了防止某域名下的接口被其他域名下的網(wǎng)頁非法調(diào)用，是瀏覽器對(duì)JavaScript施加的安全限制。

這個(gè)措施的出發(fā)點(diǎn)是好的，但是程序頁面開發(fā)的過程中，卻常常給前端開發(fā)者帶來麻煩。

由于前端開發(fā)過程中，靜態(tài)資源是放在本地電腦上的，訪問這些資源通常通過IP方式(127.0.0.1)或者localhosts來訪問，與線上服務(wù)器所在域名不符，不能順利調(diào)用服務(wù)的端口。

解決跨域問題常用的解決方案有這兩個(gè)：

• JSONP：利用script標(biāo)簽可跨域的特點(diǎn)，在跨域腳本中可以直接回調(diào)當(dāng)前腳本的函數(shù)。
• CORS：服務(wù)器設(shè)置HTTP響應(yīng)頭中Access-Control-Allow-Origin的值，解除跨域限制。

但是這兩個(gè)跨域方案都存在一個(gè)致命的缺陷，嚴(yán)重依賴后端的協(xié)助。

開發(fā)中遇到的每一個(gè)接口都需要提前找后端進(jìn)行特殊的處理。而且即使后端愿意幫忙，某些接口不是隨便就能開放的(譬如已經(jīng)在上線正式環(huán)境的接口)。

無論如何，依賴后端協(xié)助的跨域解決方案都會(huì)在一定程度上限制前端開發(fā)的進(jìn)度。

那么有沒有前端獨(dú)立就能實(shí)現(xiàn)的跨域方案呢?有的，我們可以利用「代理」或「反向代理」技術(shù)來實(shí)現(xiàn)開發(fā)中的跨域問題。

代理與反向代理

代理

代理，也稱正向代理，意思是一個(gè)位于客戶端和目標(biāo)服務(wù)器(target server)之間的服務(wù)器，為了從目標(biāo)服務(wù)器取得內(nèi)容，客戶端向代理發(fā)送一個(gè)請(qǐng)求并指定目標(biāo)(目標(biāo)服務(wù)器)，然后代理向目標(biāo)服務(wù)器轉(zhuǎn)交請(qǐng)求并將獲得的內(nèi)容返回給客戶端。

通俗地說：

• 「客戶端」可以看作一個(gè)黑社會(huì)大佬，「目標(biāo)服務(wù)器」可以看作一家飯店，「代理服務(wù)器」可以看作小弟。
• 「老大」想吃飯店的醬排骨飯，就讓「小弟」去買，「小弟」跑到「飯店」要個(gè)醬排骨飯。
• 「飯店」醬排骨飯做好，送到「小弟」手上，「小弟」最后再把醬排骨飯拿給「大佬」。

說白了，小弟就是個(gè)跑腿的，代理大佬的需求。

數(shù)據(jù)流程：

• 數(shù)據(jù)請(qǐng)求過程：瀏覽器-》代理服務(wù)器-》目標(biāo)服務(wù)器
• 數(shù)據(jù)返回過程：目標(biāo)服務(wù)器-》代理服務(wù)器-》瀏覽器

應(yīng)用:

最經(jīng)典的應(yīng)用就是科學(xué)上網(wǎng)：我是一個(gè)國(guó)內(nèi)用戶，我訪問不了google，但是我能訪問一個(gè)香港的某個(gè)代理服務(wù)器。

這個(gè)香港的代理服務(wù)器可以訪問google，于是我先把請(qǐng)求發(fā)送到那個(gè)代理服務(wù)器，告訴他我需要訪問google，代理服務(wù)器去取內(nèi)容，最后返回給我。

就好比，大佬被抓起來坐牢了，不能出去買醬排骨，只好拜托小弟去買回來。

反向代理

百度百科的解釋如下：

反向代理(Reverse Proxy)方式是指以代理服務(wù)器來接受internet上的連接請(qǐng)求，然后將請(qǐng)求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器，并將從服務(wù)器上得到的結(jié)果返回給internet上請(qǐng)求連接的客戶端，此時(shí)代理服務(wù)器對(duì)外就表現(xiàn)為一個(gè)反向代理服務(wù)器。

數(shù)據(jù)流程：

• 數(shù)據(jù)請(qǐng)求過程：瀏覽器-》【反向代理服務(wù)器-》處理數(shù)據(jù)的服務(wù)器】
• 數(shù)據(jù)返回過程：【處理數(shù)據(jù)的服務(wù)器-》反向代理服務(wù)器】-》瀏覽器

通俗地說：

「瀏覽器」可以看作食客，「【反向代理服務(wù)器-》處理數(shù)據(jù)的服務(wù)器】」這一個(gè)整體可以看作飯店，其中「反向代理服務(wù)」相當(dāng)于點(diǎn)單的服務(wù)員?！柑幚頂?shù)據(jù)的服務(wù)器」可以理解為是廚師。

• 「食客」向來到「飯店」向「服務(wù)員」點(diǎn)菜，但服務(wù)員并不會(huì)真正去做菜，他是下達(dá)命令讓「廚師」去做菜。
• 「廚師」把菜做好了給「服務(wù)員」，「服務(wù)員」再把菜端給「食客」。

在外部看來，「代理服務(wù)器」和「處理數(shù)據(jù)的服務(wù)器」是一個(gè)整體。就好比，食客只會(huì)去飯店吃飯，而不是去找廚師吃飯(即對(duì)于瀏覽器來說，到達(dá)反向代理服務(wù)器已經(jīng)完成任務(wù)了，后面的操作則由反向代理服務(wù)器負(fù)責(zé))。

具體飯店怎么操作，對(duì)食客是透明的。有可能某個(gè)服務(wù)員即當(dāng)服務(wù)器也當(dāng)廚師(即反向代理服務(wù)器和處理數(shù)據(jù)的服務(wù)器是同一臺(tái)PC機(jī))。

補(bǔ)充一下，沒有反向代理，就好比沒有了服務(wù)員，食客直接向廚師要吃的。譬如，你餓了，直接叫媽媽做飯是一樣的(少了下訂單的步驟)

比較

從用途上來講：

• 正向代理的典型用途是為在防火墻內(nèi)的局域網(wǎng)客戶端提供訪問Internet的途徑。正向代理還可以使用緩沖特性減少網(wǎng)絡(luò)使用率。
• 反向代理的典型用途是為后端的多臺(tái)服務(wù)器提供負(fù)載平衡，或?yàn)楹蠖溯^慢的服務(wù)器提供緩沖服務(wù)。

從安全性來講：

• 正向代理允許客戶端通過它訪問任意網(wǎng)站并且隱藏客戶端自身，因此你必須采取安全措施以確保僅為經(jīng)過授權(quán)的客戶端提供服務(wù)。
• 反向代理對(duì)外都是透明的，訪問者并不知道自己訪問的是一個(gè)代理。

從使用方來看：

• 正向代理是瀏覽器端進(jìn)行配置的，與服務(wù)器端無關(guān)，甚至可以對(duì)服務(wù)端隱藏。
• 反向代理是服務(wù)器端配置的，對(duì)瀏覽器端是透明的。

利用代理實(shí)現(xiàn)跨域

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

對(duì)正向代理服務(wù)器進(jìn)行配置，當(dāng)獲取非接口數(shù)據(jù)時(shí)，讓代理服務(wù)器指向開發(fā)者本機(jī)的資源。當(dāng)訪問接口時(shí)，訪問后端接口數(shù)據(jù)。

相當(dāng)于大佬讓小弟把醬排骨飯里面的飯和醬排骨分開買，飯自己家煮，醬排骨才去飯店買。

程序運(yùn)行過程

• 瀏覽器訪問頁面，假設(shè)訪問淘寶頁面：taobao.com/index.html(假設(shè)這個(gè)頁面中調(diào)用了taobao.com/api/getNew獲取最新商品的接口)
• taobao.com/index.html請(qǐng)求經(jīng)過代理服務(wù)器，根據(jù)配置，index.html頁面請(qǐng)求127.0.0.1:3000
• 127.0.0.1:3000返回index.html文件給瀏覽器。
• 瀏覽器運(yùn)行index.html頁面，發(fā)起taobao.com/api/etNew請(qǐng)求。
• taobao.com/api/getNew請(qǐng)求經(jīng)過代理服務(wù)器，但由于沒有對(duì)這個(gè)接口進(jìn)行特殊配置，會(huì)正常訪問淘寶服務(wù)器中的接口。
• 淘寶服務(wù)器接受到taobao.com/api/getNew請(qǐng)求，檢查請(qǐng)求頭的hosts字段，發(fā)現(xiàn)是taobao.com，沒有跨域，將結(jié)果返回給代理服務(wù)器。
• 代理服務(wù)器拿到結(jié)果，返回給瀏覽器，瀏覽器進(jìn)行解析顯示。

代理配置(以mac下的charles為例)

• 打開charles的映射關(guān)系表【charles->tool->Map Remote】。

• 點(diǎn)擊add可以添加映射關(guān)系。

• 點(diǎn)擊 ? 符號(hào)，可以進(jìn)入配置規(guī)則介紹頁面。

注意：

• 匹配taobao.com/api/ 的配置項(xiàng)要放在匹配taobao.com/ 的配置項(xiàng)前，讓匹配API的優(yōu)先級(jí)更高。否則將只匹配到taobao.com/*的配置。
• 如果接口請(qǐng)求中，有涉及到https協(xié)議的，需要提前在電腦上安裝charles的證書 。
• chrome系瀏覽器的請(qǐng)求是不經(jīng)過charles代理的，這時(shí)需要設(shè)置電腦上的網(wǎng)絡(luò)設(shè)置，設(shè)置代理地址為charles。

• 微信開發(fā)者工具是不走系統(tǒng)代理的，需要額外設(shè)置。【微信開發(fā)者工具-》設(shè)置-》代理-》指向代理服務(wù)器】

利用反向代理實(shí)現(xiàn)跨域

反向代理需要用到nginx，其詳細(xì)介紹請(qǐng)看 http://www.nginx.cn/doc/http://www.nginx.cn/doc/

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

原理大體相同，但是處理的端不同，反向代理實(shí)在服務(wù)器端進(jìn)行處理。首先修改hosts文件，將域名指向開發(fā)者的電腦本身，

把自己偽裝成服務(wù)端，再通過nginx對(duì)不同的請(qǐng)求進(jìn)行轉(zhuǎn)發(fā)，把靜態(tài)資源指向開發(fā)者本地電腦的資源，將接口指向?qū)嶋H的服務(wù)器。

相當(dāng)于把飯店設(shè)置在了黑社會(huì)的樓下，去樓下買醬排骨飯的時(shí)候，飯店飯自己做，醬排骨則偷偷跑去別的飯店買。

代理配置

• 設(shè)置hosts文件，將目標(biāo)域名指向本機(jī)。

• 編輯nginx配置，對(duì)不同的資源請(qǐng)求，指向到對(duì)應(yīng)地址。同樣的，將靜態(tài)資源指向本機(jī)服務(wù)，將接口指向真正的服務(wù)器。

程序運(yùn)行過程

• 瀏覽器訪問頁面，假設(shè)訪問淘寶頁面：taobao.com/index.html
• taobao.com域名解析先經(jīng)過hosts文件配置，發(fā)現(xiàn)taobao.com域名指向127.0.0.1，則向本機(jī)發(fā)起請(qǐng)求。
• nginx接收到taobao.com/index.html請(qǐng)求，根據(jù)nginx的配置，將把這個(gè)請(qǐng)求轉(zhuǎn)發(fā)給127.0.0.1:3000。
• 瀏覽器拿到index.html文件，發(fā)起taobao.com/api/getNew請(qǐng)求
• nginx接收到taobao.com/api/getNew請(qǐng)求請(qǐng)求，根據(jù)nginx的配置，將把這個(gè)請(qǐng)求轉(zhuǎn)發(fā)給真正的淘寶服務(wù)器中。
• 淘寶服務(wù)器將數(shù)據(jù)返回給nginx，再返回給瀏覽器執(zhí)行。

簡(jiǎn)單的對(duì)比

• 使用charles等正向代理方式比較簡(jiǎn)單，需要掌握的知識(shí)點(diǎn)也比較少。但同時(shí)其可配置性較弱，更適合小型項(xiàng)目使用。
• 使用nginx的反向代理則相對(duì)復(fù)雜一些，需要了解基本的nginx配置。但其可配置性較強(qiáng)，支持URL的正則匹配，設(shè)置優(yōu)先級(jí)等，適合復(fù)雜的項(xiàng)目使用