一、先搞懂：前端视角的 Nginx 代理核心概念
1. 什么是 Nginx 代理？
Nginx 是一款高性能的 HTTP 服务器 / 反向代理服务器，对前端来说，「代理」就是：
- 前端请求 → 先发给 Nginx 服务器 → Nginx 代替前端请求后端接口 / 获取资源 → Nginx 将结果返回给前端。
- 核心价值：突破浏览器「同源策略」（跨域）、统一接口域名、优化资源加载（缓存 / 压缩）。
2. 代理的核心类型（前端只关注这 2 种）
| 代理类型 | 核心作用 | 前端使用场景 |
|---|---|---|
| 反向代理（常用） | Nginx 代理前端请求到后端服务器（隐藏后端地址） | 解决跨域、接口转发、部署多环境 |
| 正向代理 | Nginx 代理前端访问外部网络（如翻墙） | 开发环境访问外网接口（极少用） |
对前端来说，99% 的场景都是「反向代理」，下文所有内容均围绕反向代理展开。
二、前端日常项目中 Nginx 代理的核心使用场景
场景 1：解决开发 / 生产环境的跨域问题（最核心）
浏览器的「同源策略」要求前端页面和接口的「协议、域名、端口」必须一致，否则跨域。Nginx 代理能让前端请求先到 Nginx（同源），再由 Nginx 转发到后端（Nginx 无跨域限制）。
（1）开发环境：本地 Nginx 代理（替代 devServer 代理）
- 适用场景：后端接口未配置 CORS，或本地 devServer 代理满足不了复杂需求（如多域名转发）。
前端代码中请求写法（无需写完整后端地址，直接请求同源的 /api）：
// 前端请求：http://localhost:8080/api/user → Nginx 转发到 http://192.168.1.100:8081/user
axios.get('/api/user').then(res => console.log(res));
配置示例（nginx.conf）：
# 配置 Nginx 监听本地端口（和前端页面同源）
server {
listen 8080; # 前端页面运行在 http://localhost:8080
server_name localhost;
# 代理后端接口：前端请求 /api → 转发到后端真实地址
location /api/ {
proxy_pass http://192.168.1.100:8081/;
# 关键配置：传递请求头（解决跨域 + 后端识别来源）
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;
}
# 代理前端静态资源（本地打包后的 dist 目录）
location / {
root /Users/xxx/project/dist; # 前端 dist 目录绝对路径
index index.html index.htm;
try_files $uri $uri/ /index.html; # 解决 Vue/React 路由刷新 404
}
}
（2）生产环境：服务器 Nginx 代理（部署必用）
- 适用场景：前端打包后部署到服务器，接口请求通过 Nginx 转发，避免跨域 + 隐藏后端真实地址。
