快捷導(dǎo)航

nginx通過(guò)location配置代理的原理和實(shí)現(xiàn)方式

更新時(shí)間：2025年03月19日 11:23:31 作者：寅燈

這篇文章主要介紹了nginx通過(guò)location配置代理的原理和實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、場(chǎng)景一：?jiǎn)我痪W(wǎng)絡(luò)環(huán)境

1、互聯(lián)網(wǎng)環(huán)境

1）不用nginx負(fù)載

通過(guò)VsCode、Hbuilder、WebStorm 等前端開(kāi)發(fā)工具，本地啟動(dòng)啟動(dòng)前端代碼，啟動(dòng)后用默認(rèn)ip（localhost（127.0.0.1））、端口號(hào)8080或者是隨機(jī)生成的，前端頁(yè)面打開(kāi)后，直接調(diào)用后端接口，接口的ip地址可以直接寫(xiě)在代碼里，自動(dòng)觸發(fā)直接訪問(wèn)后端服務(wù)。前端代碼一般會(huì)使用相對(duì)路徑或者沒(méi)有完整寫(xiě)出 IP 和端口的接口地址，比如：

axios.get('/api/user')

這種情況下：前端系統(tǒng)會(huì)根據(jù)你當(dāng)前運(yùn)行的環(huán)境來(lái)推斷請(qǐng)求的地址。如果你是通過(guò) HBuilder 啟動(dòng)本地開(kāi)發(fā)環(huán)境（如使用 HBuilderX 直接啟動(dòng)或者 npm run dev ），它會(huì)根據(jù)默認(rèn)的開(kāi)發(fā)服務(wù)器（通常是 localhost 或 127.0.0.1）來(lái)拼接出完整的請(qǐng)求 URL。請(qǐng)求會(huì)默認(rèn)發(fā)送到：

http://localhost:8080/api/user

（假設(shè)你的本地服務(wù)器是在 8080 端口上運(yùn)行的）。這個(gè)過(guò)程本質(zhì)上是因?yàn)闉g覽器或應(yīng)用會(huì)將請(qǐng)求的路徑補(bǔ)充為完整的 URL，基于當(dāng)前運(yùn)行環(huán)境的 IP 和端口來(lái)自動(dòng)推導(dǎo)。

假如：你在代碼中明確指定了完整的后端接口地址，例如：

axios.get('http://192.168.1.100:3000/api/user')

此時(shí)，無(wú)論你是在本地開(kāi)發(fā)還是部署到服務(wù)器，前端代碼都會(huì)按照這個(gè)地址去發(fā)送請(qǐng)求。此時(shí)，前端不會(huì)再使用默認(rèn)的地址和端口，因?yàn)槟阋呀?jīng)顯式提供了完整的域名/IP 和端口。這意味著，在這種情況下，系統(tǒng)不會(huì)再進(jìn)行自動(dòng)拼接，并且請(qǐng)求會(huì)直接發(fā)送到你指定的后端地址，而不會(huì)涉及默認(rèn)的本地地址。

2）使用nginx代理前端代碼

此環(huán)境中把前端代碼打包后放到nginx負(fù)載包下面的html文件夾下面，nginx.conf 配置文件中簡(jiǎn)單的配置一下代理地址。

 server {
        listen       8081;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		location / {
			root   html/build-f/build/web; #效果
            index  index.html index.htm;
        }
}

前端代碼通過(guò)nginx，后端代碼直接在瀏覽器請(qǐng)求了，不經(jīng)過(guò)nginx負(fù)載了。

3）使用nginx代理前后端代碼

如果后端的API接口也要通過(guò)nginx代理，那么需要額外添加配置

    server {
        listen       8081;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		location / { 
			root   html/build-jt-f/build-jt/web; #效果
            index  index.html index.htm;
        }
		
		 # 后臺(tái)請(qǐng)求接口轉(zhuǎn)發(fā)到接口地址
        location /nandao/url1Server {
            #add_header 'Access-Control-Allow-Origin' '*';
            #add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
            proxy_pass http://localhost:8888/;
			rewrite ^/nandao/url1Server/(.*) /$1 break;
        }
}

這樣配置之后的運(yùn)行邏輯如下：

瀏覽器上顯示的請(qǐng)求地址如下：

http://localhost:8081/nandao/url1Server/basin/selectCity?code=010

經(jīng)過(guò)nginx后實(shí)際請(qǐng)求后端接口的全路徑如下：

http://localhost:8888/basin/selectCity?code=010

即：http://localhost:8081 換成 http://localhost:8888，然后 /nandao/url1Server/ 字符串去掉！

2、局域網(wǎng)環(huán)境

全局域網(wǎng)環(huán)境和互聯(lián)網(wǎng)環(huán)境類(lèi)似，不牽涉到網(wǎng)絡(luò)問(wèn)題，思路是一致的。

二、場(chǎng)景二：多種網(wǎng)絡(luò)環(huán)境

1、頁(yè)面端互聯(lián)網(wǎng)訪問(wèn)局域網(wǎng)

前后端服務(wù)均部署到局域網(wǎng)，現(xiàn)在要配置通過(guò)互聯(lián)網(wǎng)域名訪問(wèn)局域網(wǎng)的應(yīng)用。

一般有以下幾個(gè)方案：配置NAT和端口映射（一般通過(guò)路由器）、配置反向代理（使用Nginx或其他代理服務(wù)器）、使用VPN（虛擬專(zhuān)用網(wǎng)絡(luò)）、通過(guò)公網(wǎng)IP直接訪問(wèn)（如果有公網(wǎng)IP）。

此處我們分析常用的nginx反向代理：在公網(wǎng)可訪問(wèn)的服務(wù)器上部署 Nginx，配置反向代理，將用戶請(qǐng)求轉(zhuǎn)發(fā)到局域網(wǎng)內(nèi)的應(yīng)用。

假設(shè)你已經(jīng)將公網(wǎng)域名 yourdomain.com 解析到 Nginx 服務(wù)器上，Nginx 配置文件如下：

server {
    listen 80;
    server_name yourdomain.com;

    #http://yourdomain.com 轉(zhuǎn)發(fā)到 http://192.168.1.100:8080
    location / {
        proxy_pass http://192.168.1.100:8080;  # 將請(qǐng)求轉(zhuǎn)發(fā)到內(nèi)網(wǎng)應(yīng)用
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    #http://yourdomain.com/nandao 轉(zhuǎn)發(fā)到 http://192.168.1.100:8080/nandao
    location /nandao {
        proxy_pass http://192.168.1.100:8080;  # 將請(qǐng)求轉(zhuǎn)發(fā)到內(nèi)網(wǎng)應(yīng)用
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

   #http://yourdomain.com/nandao 轉(zhuǎn)發(fā)到 http://192.168.1.100:8080
   location /nandao {
        proxy_pass http://192.168.1.100:8080;  # 將請(qǐng)求轉(zhuǎn)發(fā)到內(nèi)網(wǎng)應(yīng)用
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        rewrite ^/nandao/(.*) /$1 break;
    }
}

注意：http://192.168.1.100:8080 此地址在改服務(wù)器上可以 telnet 通。（服務(wù)器有內(nèi)網(wǎng)、外網(wǎng)、浮動(dòng)ip的區(qū)別）

2、API接口代理轉(zhuǎn)發(fā)

接著上面的流程：轉(zhuǎn)發(fā)到 nginx后 192.168.1.100:8080 ，前端頁(yè)面和后端接口

 server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		location / { 
			root   html/build-jt-f/build-jt/web; #效果
            index  index.html index.htm;
        }
		
		 # 后臺(tái)請(qǐng)求接口轉(zhuǎn)發(fā)到接口地址
        location /nandao/url1Server {
            #add_header 'Access-Control-Allow-Origin' '*';
            #add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
            proxy_pass http://localhost:8888/;#或者是其他ip,其他此服務(wù)器里可以ping 通
			rewrite ^/nandao/url1Server/(.*) /$1 break;
        }
}

三、匹配規(guī)則

默認(rèn)匹配：

server {
    listen       8081;
    server_name  localhost;

    location / {
        root   html/build-jt-f/build-jt/web;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

#?頁(yè)面訪問(wèn)地址http://localhost:8081/nandao/

沒(méi)有/nandao/ 模塊配置時(shí)，請(qǐng)求會(huì)默認(rèn)匹配 location /，Nginx 會(huì)將 /nandao/ 轉(zhuǎn)發(fā)到 html/build-jt-f/build-jt/web/nandao/ 目錄下查找靜態(tài)文件。

server {
    listen       8081;
    server_name  localhost;

    location / {
        alias html/build-jt-f/build-jt/web;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

如果是alias 參數(shù)：

使用 alias 指令時(shí)，Nginx 會(huì)將請(qǐng)求路徑中的 /nandao/ 前綴替換為 alias 指定的路徑。
指定了靜態(tài)文件的實(shí)際目錄，/nandao/ 前綴被移除，路徑變?yōu)?html/build-jt-f/build-jt/web/。