可行但需谨慎：Nginx统一监听80/443端口，通过location匹配/api/转发至后端3001端口，其余请求由静态文件目录响应，避免跨域与维护问题。
直接用 Nginx 基于端口区分 API 和前端，是可行但需谨慎的设计——它不依赖域名或路径，只靠监听不同端口，配置简单、隔离明确，适合开发环境或内网部署。关键在于：后端 API 服务和前端静态资源分别绑定不同端口，Nginx 在同一台机器上对这两个端口做反向代理或直接托管，并严格控制访问入口。
明确端口分工与服务部署
先规划好端口职责，避免冲突：
- 前端页面：让构建后的静态文件（如 dist/）由 Nginx 直接提供服务，监听例如 8080 端口；
- API 接口：后端服务（如 Node.js、Python Flask、Java Spring Boot）运行在另一个端口，例如 3001，不对外暴露，仅由 Nginx 反向代理访问；
- Nginx 自身监听用户实际访问的端口（如 80 或 443），根据请求特征（通常是 location 路径）分发到上述两个内部端口。
配置 Nginx 实现端口级分离
核心不是“Nginx 监听多个端口来区分前后端”，而是：Nginx 统一接收请求（如 80 端口），再按规则把 /api/ 类请求转发给后端服务（3001），其余请求交给前端静态服务（8080）。示例配置：
server {
listen 80;
server_name localhost;
<pre class='brush:php;toolbar:false;'># 所有 /api/ 开头的请求 → 转发给后端 API 服务
location /api/ {
proxy_pass http://127.0.0.1:3001/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# 其他所有请求 → 指向前端静态文件目录（等效于“托管在 8080 端口”的效果）
location / {
root /var/www/my-app/dist;
try_files $uri $uri/ /index.html;
}}
立即学习“前端免费学习笔记（深入）”；
注意：proxy_pass http://127.0.0.1:3001/ 末尾的 / 很关键，它会剥离 /api/ 前缀再转发，否则后端收到的路径会多一层。
为什么不用 Nginx 直接监听两个端口分别服务？
技术上可以（比如一个 server 块 listen 8080 托管前端，另一个 listen 3001 代理 API），但这样会导致：
- 前端代码中调用 API 需写死
http://localhost:3001/api/xxx，跨域问题无法规避（浏览器同源策略）； - 上线后需改请求地址，维护成本高；
- 不符合“单入口”设计原则，也不利于 HTTPS 统一配置。
所以推荐统一入口（如 80/443），用 location + proxy_pass 实现逻辑隔离，这才是生产就绪的做法。
开发阶段快速验证的小技巧
若只是本地调试，可临时让前端开发服务器（如 vite、vue-cli）和后端服务各占一个端口（如 5173 和 3001），然后配一个简易 Nginx 把 80 端口作为统一代理入口：
- 访问
http://localhost/→ 显示前端页面（反代 5173）； - 访问
http://localhost/api/users→ 反代 3001； - 这样前端代码始终用相对路径
/api/...，无需修改，也无跨域报错。
