目前項目下多個模塊各自有着不同的端口號,前端進行訪問的時候就有問題了。
用的是 vue-admin-template
後臺的前端框架,這裏配置後端訪問地址的時候如果我指定了 8202,那麼8201的服務接口就訪問不了。
爲了提供統一的 api 接口,所以使用nginx作爲反向代理服務器。
一、Nginx 介紹
反向代理,其實客戶端對代理是無感知的。
因爲客戶端不需要任何配置就可以訪問,我們只需要將請求發送到反向代理服務器,由反向代理服務器去選擇目標服務器獲取數據後再返回給客戶端。
此時反向代理服務器和目標服務器對外就是一個服務器,暴露的是代理服務器地址,隱藏了真實服務器IP地址。
更多相關介紹,可以參考我之前的一篇分享:【Nginx 快速入門】反向代理、負載均衡、動靜分離
二、Nginx 配置文件
我本機上之前裝過win版的 nginx,找到配置文件所在,打開在裏面修改相關規則即可。
修改配置:
server {
listen 9001;
server_name localhost;
location ~ /hsop/ {
proxy_pass http://localhost:8201;
}
location ~ /cmn/ {
proxy_pass http://localhost:8202;
}
}
listen
:9001 表示 Nginx 對外的端口號,最後都要通過這個端口進行Nginx的訪問server_name
:主機名稱,我這裏是本地
下面的就是規則,比如location ~ /hsop/
,就是當訪問路徑中存在/hsop/
,就轉發到http://localhost:8201
。這裏的~
表示一種正則匹配。
然後在 cmd 中啓動一下:start nginx.exe
。
訪問http://localhost:9001/
,看到這個說明啓動成功了:
三、修改前端部分
修改配置文件裏的BASE_API
,改成訪問 9001 。
同時啓動了 2 個端口的後端模塊,前端頁面分別進行訪問,訪問成功。