nginx通过location配置代理的原理和方式

nginx通过location配置代理的原理和方式，是我们作为运维人员需要熟知的内容，前后端服务通过nginx作为桥梁互通访问，今天我们分享一下具体使用场景。

一、场景一：单一网络环境

1、互联网环境

1）不用nginx负载

通过VsCode、Hbuilder、WebStorm 等前端开发工具 ，本地启动启动前端代码，启动后用默认ip（localhost（127.0.0.1））、端口号8080或者是随机生成的，前端页面打开后，直接调用后端接口，接口的ip地址可以直接写在代码里，自动触发直接访问后端服务。前端代码一般会使用相对路径或者没有完整写出 IP 和端口的接口地址，比如：

axios.get('/api/user') 

这种情况下：前端系统会根据你当前运行的环境来推断请求的地址。如果你是通过 HBuilder 启动本地开发环境（如使用 HBuilderX 直接启动或者 npm run dev ），它会根据默认的开发服务器（通常是 localhost 或 127.0.0.1）来拼接出完整的请求 URL。请求会默认发送到：

http://localhost:8080/api/user

（假设你的本地服务器是在 8080 端口上运行的）。这个过程本质上是因为浏览器或应用会将请求的路径补充为完整的 URL，基于当前运行环境的 IP 和端口来自动推导。

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

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

此时，无论你是在本地开发还是部署到服务器，前端代码都会按照这个地址去发送请求。此时，前端不会再使用默认的地址和端口 ，因为你已经显式提供了完整的域名/IP 和端口。这意味着，在这种情况下，系统不会再进行自动拼接，并且请求会直接发送到你指定的后端地址，而不会涉及默认的本地地址。

2）使用nginx代理前端代码

此环境中把前端代码打包后放到nginx负载包下面的html文件夹下面，nginx.conf 配置文件中简单的配置一下代理地址。

 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;
        }
}

前端代码通过nginx，后端代码直接在浏览器请求了，不经过nginx负载了。

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

如果后端的API接口也要通过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;
        }
		
		 # 后台请求接口转发到接口地址
        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;
        }
}

这样配置之后的运行逻辑如下：

浏览器上显示的请求地址如下：
http://localhost:8081/nandao/url1Server/basin/selectCity?code=010

经过nginx后实际请求后端接口的全路径如下：
http://localhost:8888/basin/selectCity?code=010

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

2、局域网环境

全局域网环境和互联网环境类似，不牵涉到网络问题，思路是一致的。

二、场景二：多种网络环境

1、页面端互联网访问局域网

前后端服务均部署到局域网，现在要配置通过互联网域名访问局域网的应用。一般有以下几个方案：配置NAT和端口映射（一般通过路由器）、配置反向代理（使用Nginx或其他代理服务器）、

使用VPN（虚拟专用网络）、通过公网IP直接访问（如果有公网IP）。此处我们分析常用的nginx反向代理：在公网可访问的服务器上部署 Nginx，配置反向代理，将用户请求转发到局域网内的应用。假设你已经将公网域名 yourdomain.com 解析到 Nginx 服务器上，Nginx 配置文件如下：

server {
    listen 80;
    server_name yourdomain.com;

    #http://yourdomain.com 转发到 http://192.168.1.100:8080
    location / {
        proxy_pass http://192.168.1.100:8080;  # 将请求转发到内网应用
        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 转发到 http://192.168.1.100:8080/nandao
    location /nandao {
        proxy_pass http://192.168.1.100:8080;  # 将请求转发到内网应用
        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 转发到 http://192.168.1.100:8080
   location /nandao {
        proxy_pass http://192.168.1.100:8080;  # 将请求转发到内网应用
        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 此地址在改服务器上可以 telnet 通。（服务器有内网、外网、浮动ip的区别）

2、API接口代理转发

接着上面的流程：转发到 nginx后 192.168.1.100:8080 ，前端页面和后端接口

 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;
        }
		
		 # 后台请求接口转发到接口地址
        location /nandao/url1Server {
            #add_header 'Access-Control-Allow-Origin' '*';
            #add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
            proxy_pass http://localhost:8888/;#或者是其他ip,其他此服务器里可以ping 通
			rewrite ^/nandao/url1Server/(.*) /$1 break;
        }
}

三、匹配规则

1、默认匹配

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;
    }
}

#​页面访问地址http://localhost:8081/nandao/

​

没有/nandao/ 模块配置时，请求会默认匹配 location /，Nginx 会将 /nandao/ 转发到 html/build-jt-f/build-jt/web/nandao/ 目录下查找静态文件。

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 参数：使用 alias 指令时，Nginx 会将请求路径中的 /nandao/ 前缀替换为 alias 指定的路径。 指定了静态文件的实际目录，/nandao/ 前缀被移除，路径变为 html/build-jt-f/build-jt/web/。

到此，nginx转发代理分享暂时告一段落，后面会分享更加高级的功能，敬请期待！