如何通过Nginx基于端口的虚拟主机区分API接口与前端页面-Nginx-PHP中文网

可行但需谨慎：Nginx统一监听80/443端口，通过location匹配/api/转发至后端3001端口，其余请求由静态文件目录响应，避免跨域与维护问题。

如何通过nginx基于端口的虚拟主机区分api接口与前端页面

直接用 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/ 前缀再转发，否则后端收到的路径会多一层。