資訊專欄INFORMATION COLUMN
摘要：之前拜讀過(guò)之前拜讀過(guò)發(fā)表的一片名為前后分離架構(gòu)的探索之路的文章，也在提問(wèn)中提到文章中不明白的內(nèi)容，昨天有幸跟一位朋友聊起來(lái)如何使用反向代理解決跨域問(wèn)題，經(jīng)過(guò)他的指導(dǎo)我自己實(shí)踐，終于測(cè)試成功了，把結(jié)果分享一下。
之前拜讀過(guò)之前拜讀過(guò)nightire發(fā)表的一片名為“前后分離架構(gòu)的探索之路”的文章，也在提問(wèn)中提到文章中不明白的內(nèi)容，昨天有幸跟一位朋友聊起來(lái)如何使用反向代理解決跨域問(wèn)題，經(jīng)過(guò)他的指導(dǎo)我自己實(shí)踐，終于測(cè)試成功了，把結(jié)果分享一下。
問(wèn)題場(chǎng)景：后端開(kāi)發(fā)API接口，部署在開(kāi)發(fā)服務(wù)器上，前端開(kāi)發(fā)靜態(tài)頁(yè)面部署在前端開(kāi)發(fā)服務(wù)器上
前端JS中需要通過(guò)AJAX異步請(qǐng)求API的數(shù)據(jù)，由于兩者分布在兩臺(tái)服務(wù)器中，所以這個(gè)請(qǐng)求存在了跨域
方法一：
前端開(kāi)發(fā)完成以后，將前端工程文件通過(guò)某些方法直接拷貝到后端服務(wù)器上，使兩者處于同一臺(tái)服務(wù)器，解決跨域。
問(wèn)題：
這樣做導(dǎo)致前端不能時(shí)時(shí)調(diào)試自己的邏輯，還要依賴于后端的環(huán)境
方法二：
前端在自己的服務(wù)器上模擬后端API的數(shù)據(jù)
問(wèn)題：
這樣做前端不僅要寫自己的內(nèi)容，還要額外編寫后端的測(cè)試數(shù)據(jù)，增加工作量而且不能直接知曉API的各種實(shí)際返回結(jié)果。
書歸正傳，下面說(shuō)說(shuō)如何使用反向代理解決跨域問(wèn)題
我用的是nginx，可以使用其他相同功能的軟件替換，比如我在本地開(kāi)啟nginx監(jiān)聽(tīng)80端口，本地服務(wù)器跑8080端口，遠(yuǎn)程API服務(wù)器在10.10.10.10上
通過(guò)在nginx的配置文件，在location里把常規(guī)路徑直接指向本地8080，把API請(qǐng)求路徑指向遠(yuǎn)程服務(wù)器地址
本地訪問(wèn)localhost/常規(guī)地址，通過(guò)nginx的反向代理，請(qǐng)求會(huì)轉(zhuǎn)到localhost:8080這臺(tái)服務(wù)器上，代碼里請(qǐng)求數(shù)據(jù)地址為/api則會(huì)把請(qǐng)求轉(zhuǎn)到遠(yuǎn)程PAI服務(wù)器上，而整個(gè)過(guò)程，我們其實(shí)都是在localhost里進(jìn)行的，既沒(méi)有跨域名，也沒(méi)有跨端口。
使用反向代理的好處是，開(kāi)發(fā)人員只需要關(guān)注自己的環(huán)境不需要關(guān)注與自己無(wú)關(guān)的內(nèi)容，能夠更加專注的開(kāi)發(fā)和測(cè)試自己的代碼，缺點(diǎn)是要熟悉反向代理的環(huán)境搭建可能稍微有點(diǎn)超出自己的責(zé)任范疇。
各種方法都有優(yōu)缺點(diǎn)，根據(jù)自己的實(shí)際情況選擇合適自己的模式才是王道。
注：本文在于拋磚引玉，內(nèi)容里某些概念或者文辭可能使用不當(dāng)，僅代表個(gè)人理解，如有不當(dāng)之處還望指出批閱。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/78747.html
摘要：反向代理服務(wù)器對(duì)于客戶端而言它就像是原始服務(wù)器，并且客戶端不需要進(jìn)行任何特別的設(shè)置。使用反向代理可能訪問(wèn)網(wǎng)頁(yè)相對(duì)于之前響應(yīng)會(huì)比較慢 標(biāo)簽： Nginx,跨域 問(wèn)題 在之前的分享的跨域資源共享的文章中，有提到要注意跨域時(shí)，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為*，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。在此次項(xiàng)目開(kāi)發(fā)中與他人協(xié)作中就遇到...
摘要：反向代理服務(wù)器對(duì)于客戶端而言它就像是原始服務(wù)器，并且客戶端不需要進(jìn)行任何特別的設(shè)置。使用反向代理可能訪問(wèn)網(wǎng)頁(yè)相對(duì)于之前響應(yīng)會(huì)比較慢 標(biāo)簽： Nginx,跨域 問(wèn)題 在之前的分享的跨域資源共享的文章中，有提到要注意跨域時(shí)，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為*，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。在此次項(xiàng)目開(kāi)發(fā)中與他人協(xié)作中就遇到...
摘要：反向代理服務(wù)器對(duì)于客戶端而言它就像是原始服務(wù)器，并且客戶端不需要進(jìn)行任何特別的設(shè)置。使用反向代理可能訪問(wèn)網(wǎng)頁(yè)相對(duì)于之前響應(yīng)會(huì)比較慢 問(wèn)題 在之前的分享的跨域資源共享的文章中，有提到要注意跨域時(shí)，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為*，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。在此次項(xiàng)目開(kāi)發(fā)中與他人協(xié)作中就遇到此類問(wèn)題。 showImg(h...
摘要：三反向代理解決的原理將安裝在本地，然后將項(xiàng)目部署于下，這樣訪問(wèn)本地項(xiàng)目時(shí)用本地項(xiàng)目即可訪問(wèn)。這樣瀏覽器之間的請(qǐng)求完全滿足瀏覽器域名協(xié)議端口相同的同源策略，可在不改變后臺(tái)接口的情況下避免跨域問(wèn)題。 一、問(wèn)題背景說(shuō)明： 編寫移動(dòng)前端頁(yè)面時(shí)需要訪問(wèn)后臺(tái)系統(tǒng)接口。前端項(xiàng)目在本地（個(gè)人辦公電腦）開(kāi)發(fā)，后臺(tái)接口存放后生產(chǎn)的后臺(tái)服務(wù)器，本地的ajax請(qǐng)求無(wú)法直接訪問(wèn)后臺(tái)接口，也就是遇到了跨域問(wèn)題...
摘要：三反向代理解決的原理將安裝在本地，然后將項(xiàng)目部署于下，這樣訪問(wèn)本地項(xiàng)目時(shí)用本地項(xiàng)目即可訪問(wèn)。這樣瀏覽器之間的請(qǐng)求完全滿足瀏覽器域名協(xié)議端口相同的同源策略，可在不改變后臺(tái)接口的情況下避免跨域問(wèn)題。 一、問(wèn)題背景說(shuō)明： 編寫移動(dòng)前端頁(yè)面時(shí)需要訪問(wèn)后臺(tái)系統(tǒng)接口。前端項(xiàng)目在本地（個(gè)人辦公電腦）開(kāi)發(fā)，后臺(tái)接口存放后生產(chǎn)的后臺(tái)服務(wù)器，本地的ajax請(qǐng)求無(wú)法直接訪問(wèn)后臺(tái)接口，也就是遇到了跨域問(wèn)題...
摘要：此外，其也能夠提供強(qiáng)大的反向代理功能。是由為俄羅斯訪問(wèn)量第二的站點(diǎn)開(kāi)發(fā)的，第一個(gè)公開(kāi)版本發(fā)布于年月日。 keepalived+nginx 實(shí)現(xiàn)高可用雙機(jī)熱備 + 負(fù)載均衡架構(gòu) 1 準(zhǔn)備4個(gè)ubuntu16.04虛擬機(jī)（啟用網(wǎng)卡二并使用橋接模式）:A服務(wù)器：192.168.0.103 主B服務(wù)器：192.168.0.104 主（備） 前端工程師學(xué)習(xí) Nginx ...
閱讀 1076·2021-10-14 09:42
閱讀 1369·2021-09-22 15:11
閱讀 3285·2019-08-30 15:56
閱讀 1243·2019-08-30 15:55
閱讀 3612·2019-08-30 15:55
閱讀 889·2019-08-30 15:44
閱讀 2028·2019-08-29 17:17
閱讀 2071·2019-08-29 15:37
