使用反向代理解決跨域問題

lieeps 發(fā)布于2019-08-19 17:39 / 2518人閱讀

摘要：之前拜讀過之前拜讀過發(fā)表的一片名為前后分離架構的探索之路的文章，也在提問中提到文章中不明白的內(nèi)容，昨天有幸跟一位朋友聊起來如何使用反向代理解決跨域問題，經(jīng)過他的指導我自己實踐，終于測試成功了，把結果分享一下。

之前拜讀過之前拜讀過nightire發(fā)表的一片名為“前后分離架構的探索之路”的文章，也在提問中提到文章中不明白的內(nèi)容，昨天有幸跟一位朋友聊起來如何使用反向代理解決跨域問題，經(jīng)過他的指導我自己實踐，終于測試成功了，把結果分享一下。

問題場景：

后端開發(fā)API接口，部署在開發(fā)服務器上，前端開發(fā)靜態(tài)頁面部署在前端開發(fā)服務器上
前端JS中需要通過AJAX異步請求API的數(shù)據(jù)，由于兩者分布在兩臺服務器中，所以這個請求存在了跨域

解決方法：

方法一：
前端開發(fā)完成以后，將前端工程文件通過某些方法直接拷貝到后端服務器上，使兩者處于同一臺服務器，解決跨域。
問題：
這樣做導致前端不能時時調(diào)試自己的邏輯，還要依賴于后端的環(huán)境

方法二：
前端在自己的服務器上模擬后端API的數(shù)據(jù)
問題：
這樣做前端不僅要寫自己的內(nèi)容，還要額外編寫后端的測試數(shù)據(jù)，增加工作量而且不能直接知曉API的各種實際返回結果。

書歸正傳，下面說說如何使用反向代理解決跨域問題

我用的是nginx，可以使用其他相同功能的軟件替換，比如我在本地開啟nginx監(jiān)聽80端口，本地服務器跑8080端口，遠程API服務器在10.10.10.10上

通過在nginx的配置文件，在location里把常規(guī)路徑直接指向本地8080，把API請求路徑指向遠程服務器地址

本地訪問localhost/常規(guī)地址，通過nginx的反向代理，請求會轉到localhost:8080這臺服務器上，代碼里請求數(shù)據(jù)地址為/api則會把請求轉到遠程PAI服務器上，而整個過程，我們其實都是在localhost里進行的，既沒有跨域名，也沒有跨端口。

使用反向代理的好處是，開發(fā)人員只需要關注自己的環(huán)境不需要關注與自己無關的內(nèi)容，能夠更加專注的開發(fā)和測試自己的代碼，缺點是要熟悉反向代理的環(huán)境搭建可能稍微有點超出自己的責任范疇。

各種方法都有優(yōu)缺點，根據(jù)自己的實際情況選擇合適自己的模式才是王道。

注：本文在于拋磚引玉，內(nèi)容里某些概念或者文辭可能使用不當，僅代表個人理解，如有不當之處還望指出批閱。

云服務器 GPU云服務器阿里云跨域與反向服務器代理反向代理反向代理緩存 vps反向代理

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/78747.html

利用Nginx反向代理解決跨域問題

摘要：反向代理服務器對于客戶端而言它就像是原始服務器，并且客戶端不需要進行任何特別的設置。使用反向代理可能訪問網(wǎng)頁相對于之前響應會比較慢標簽： Nginx,跨域問題在之前的分享的跨域資源共享的文章中，有提到要注意跨域時，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設為*，必須指定明確的、與請求網(wǎng)頁一致的域名。在此次項目開發(fā)中與他人協(xié)作中就遇到...

EscapedDog 2019-08-23 14:13 評論0 收藏0
利用Nginx反向代理解決跨域問題

摘要：反向代理服務器對于客戶端而言它就像是原始服務器，并且客戶端不需要進行任何特別的設置。使用反向代理可能訪問網(wǎng)頁相對于之前響應會比較慢標簽： Nginx,跨域問題在之前的分享的跨域資源共享的文章中，有提到要注意跨域時，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設為*，必須指定明確的、與請求網(wǎng)頁一致的域名。在此次項目開發(fā)中與他人協(xié)作中就遇到...

YanceyOfficial 2019-07-25 14:36 評論0 收藏0
利用Nginx反向代理解決跨域問題

摘要：反向代理服務器對于客戶端而言它就像是原始服務器，并且客戶端不需要進行任何特別的設置。使用反向代理可能訪問網(wǎng)頁相對于之前響應會比較慢問題在之前的分享的跨域資源共享的文章中，有提到要注意跨域時，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設為*，必須指定明確的、與請求網(wǎng)頁一致的域名。在此次項目開發(fā)中與他人協(xié)作中就遇到此類問題。 showImg(h...

Yu_Huang 2019-07-25 14:38 評論0 收藏0
通過nginx反向代理解決前端訪問的跨域問題

摘要：三反向代理解決的原理將安裝在本地，然后將項目部署于下，這樣訪問本地項目時用本地項目即可訪問。這樣瀏覽器之間的請求完全滿足瀏覽器域名協(xié)議端口相同的同源策略，可在不改變后臺接口的情況下避免跨域問題。一、問題背景說明：編寫移動前端頁面時需要訪問后臺系統(tǒng)接口。前端項目在本地（個人辦公電腦）開發(fā)，后臺接口存放后生產(chǎn)的后臺服務器，本地的ajax請求無法直接訪問后臺接口，也就是遇到了跨域問題...

dongxiawu 2019-08-23 11:39 評論0 收藏0
通過nginx反向代理解決前端訪問的跨域問題

摘要：三反向代理解決的原理將安裝在本地，然后將項目部署于下，這樣訪問本地項目時用本地項目即可訪問。這樣瀏覽器之間的請求完全滿足瀏覽器域名協(xié)議端口相同的同源策略，可在不改變后臺接口的情況下避免跨域問題。一、問題背景說明：編寫移動前端頁面時需要訪問后臺系統(tǒng)接口。前端項目在本地（個人辦公電腦）開發(fā)，后臺接口存放后生產(chǎn)的后臺服務器，本地的ajax請求無法直接訪問后臺接口，也就是遇到了跨域問題...

paulquei 2019-07-25 14:26 評論0 收藏0
Nginx

摘要：此外，其也能夠提供強大的反向代理功能。是由為俄羅斯訪問量第二的站點開發(fā)的，第一個公開版本發(fā)布于年月日。 keepalived+nginx 實現(xiàn)高可用雙機熱備 + 負載均衡架構 1 準備4個ubuntu16.04虛擬機（啟用網(wǎng)卡二并使用橋接模式）:A服務器：192.168.0.103 主B服務器：192.168.0.104 主（備）前端工程師學習 Nginx ...

syoya 2019-07-25 14:06 評論0 收藏0