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 136; server_name localhost; location / { root /data/nginx/html/dist; index index.html; try_files $uri $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } location /dem { alias /data/nginx/html/train; index 50x.html; # 允许所有来源访问（生产环境不推荐） add_header Access-Control-Allow-Origin * always; # 允许的HTTP方法 add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; # 允许的请求头 add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; # 预检请求缓存时间（秒） add_header Access-Control-Max-Age 1728000; # 处理OPTIONS预检请求 if ($request_method = 'OPTIONS') { add_header Content-Length 0; add_header Content-Type 'text/plain; charset=utf-8'; return 204; } } }访问：http://127.0.0.1:136/dem/layer.json 到了 /data/nginx/html/train 目录下的 layer.json 文件。
2、新增端口：
server { listen 139; server_name localhost; location / { root /data/nginx/html index 50x.html; # 允许所有来源访问（生产环境不推荐） add_header Access-Control-Allow-Origin * always; # 允许的HTTP方法 add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; # 允许的请求头 add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; # 预检请求缓存时间（秒） add_header Access-Control-Max-Age 1728000; # 处理OPTIONS预检请求 if ($request_method = 'OPTIONS') { add_header Content-Length 0; add_header Content-Type 'text/plain; charset=utf-8'; return 204; } } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }访问： 到了 /data/nginx/html/train 目录下的 layer.json 文件。
3、默认匹配
server { listen 8081; server_name localhost; location /nandao { 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 / { root html/build-jt-f/build-jt/app; index index.html index.htm; try_files $uri $uri/ /index.html; } location /nandao { 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/。
总结：核心差异总结（针对http://localhost:8081/nandao/）
结论：
- 若你的前端文件在
dist/nandao/下 → 用root； - 若你的前端文件直接在
dist/下（99% 的前端打包场景）→ 必须用alias，否则会 404。
四、通用跨域问题解决
比如图片、视频文件下载、预览等，前后端服务没有部署在同一个服务器上，容易出现跨域问题。解决方案如下：
1、nginx中配置代理
# 代理后端文件接口 location /file/download/ { proxy_pass http://127.10.0.1:8888/file/download/; # 后端接口地址 # 添加CORS响应头（关键！） add_header 'Access-Control-Allow-Origin' '$http_origin' always; add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always; # 处理OPTIONS预检请求 if ($request_method = 'OPTIONS') { add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 204; } }2、前端获取
<iframe src="http://127.10.0.1:8888/file/download/pdf/20245a34.pdf" width="100%" height="600px" frameborder="0" ></iframe>五、域名代理访问
1、通用
比如https://nandao.s.yd.gov.cn/shanhai/ 对应 http://192.18.18.90:1998/ 在域名服务器配置这，映射方式如上，nginx配置如下：
server { listen 1998; server_name localhost; add_header Cache-Control "no-cache"; location / { root html/dist; index index.html; try_files $uri $uri $uri/ /index.html; } }2、子目录
比如 https://nandao.s.yd.gov.cn/shanhai/prod/#/ 对应 http://192.18.18.90:1998/prod/
在域名服务器配置这，映射方式如上，nginx配置如下：
server { listen 1998; server_name localhost; add_header Cache-Control "no-cache"; location / { root html/dist; index index.html; try_files $uri $uri $uri/ /index.html; } location /prod { #重点关注 alias html/nandao; #重点关注 index index.html; try_files $uri $uri $uri/ /index.html; } }同理后端api接口也是这个逻辑
# 后台请求接口转发到接口地址 location /apiServer { #add_header 'Access-Control-Allow-Origin' '*'; #add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS'; proxy_pass http://192.18.18.16:8000/; rewrite ^/apiServer /(.*) /$1 break; } #请求示例：https://nandao.s.yd.gov.cn/shanhai/apiServer/nandao-service/sys/user/list到此，nginx转发代理分享暂时告一段落，后面会分享更加高级的功能，敬请期待！
