阿超 > 前后端分离项目中 Nginx 反向代理实战全解

前后端分离项目中 Nginx 反向代理实战全解

2025-07-17

运维

常制不可以待变化,一涂不可以应万方,刻船不以索遗剑。一一东晋·葛洪《抱朴子》

前后端分离项目中 Nginx 反向代理实战全解（含跨域配置）

在现代 Web 开发中，前后端分离已成为主流架构模式。无论你是用 Vue、React 还是 Angular，前端项目最终都会 build 成静态资源部署于服务器。与此同时，后端（如 Java、Node.js、Python 等）则单独运行在另一个端口上。如何让前端和后端安全、便捷又高效地“握手”？Nginx 反向代理就是我们的得力助手！

本文以 /ruben/ 为接口前缀举例，并特别说明所有路径、域名和目录的位置。还会补充常见 CORS（跨域）配置，助你一次部署无忧。

一、前后端分离架构简介

前后端分离指的是前端（UI、页面渲染等）和后端（业务逻辑、数据处理等）各自独立开发、构建和部署。
这种模式的优点有：

  • 职责清晰，协作高效
  • 前后端技术选型更自由
  • 易于扩展和维护

但实际部署时，前端和后端通常跑在不同端口或服务器上，怎么安全高效地通信？
答案就是 Nginx 反向代理。

二、场景说明与路径变量说明

假定你有如下环境（注意：所有变量名都需要根据自己实际情况替换！）：

  • your_domain.com：你的服务器域名（可替换为实际域名或 IP，比如 www.example.com 或 1.2.3.4）
  • /var/www/your_project/dist：前端 build 后的静态文件目录（如 dist，具体路径以实际为准）
  • 后端服务监听 8080 端口（如 http://127.0.0.1:8080，实际端口根据后端配置替换）
  • 前端请求 API 路径都带 /ruben/ 前缀（如 /ruben/api/login）

所有 your_domain.com、your_project、/var/www/your_project/dist、8080 等需根据实际替换！

三、前端 BASE_URL 配置

前端项目中（如 Vue/React），通常通过环境变量或配置文件设置 API 基础路径：

1
2
3
// 伪代码，具体配置因技术栈而异
const BASE_URL = '/ruben/';
axios.defaults.baseURL = BASE_URL;

这样，所有接口请求会自动变成 /ruben/xxx，方便 Nginx 统一代理。

四、Nginx 反向代理配置（含静态资源和跨域支持）

以下配置需将 your_domain.com、/var/www/your_project/dist 和后端端口 8080 替换为你的实际路径和服务端口！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
server {
    listen 80;
    server_name your_domain.com; # 这里填写你的实际域名或公网IP

    # 反向代理后端接口，去掉 /ruben/ 前缀
    location /ruben/ {
        # 跨域相关配置
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;

        # 处理预检请求（OPTIONS）
        if ($request_method = 'OPTIONS') {
            return 204;
        }

        rewrite ^/ruben/(.*)$ /$1 break; # 去掉 /ruben/ 前缀
        proxy_pass http://127.0.0.1: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;
    }

    # 前端静态资源托管
    location / {
        root /var/www/your_project/dist; # 指向前端构建后的目录
        try_files $uri $uri/ /index.html; # 支持SPA前端路由
    }
}

详细说明

  • server_name your_domain.com;
    用你的实际域名或服务器公网 IP 替换 your_domain.com。
  • root /var/www/your_project/dist;
    指向你前端 build 后的静态资源目录，如 dist，请用实际路径替换。
  • proxy_pass http://127.0.0.1:8080/;
    填写你的后端服务监听地址和端口，如本地的 8080。
  • location /ruben/
    代理所有以 /ruben/ 开头的请求到后端，并去掉 /ruben/ 前缀。
  • rewrite ^/ruben/(.*)$ /$1 break;
    把 /ruben/api/xxx 重写为 /api/xxx，让后端无需关心前缀。
  • add_header ...
    设置跨域（CORS）响应头，允许任意来源访问，也可以根据需要限制为你的前端域名。
  • if ($request_method = 'OPTIONS')
    让浏览器的 OPTIONS 预检请求快速返回，提升前端体验。

五、反向代理的好处

  1. 安全性提升
    后端服务不直接暴露公网，Nginx 统一网关，防攻击、防泄漏。
  2. 跨域问题完美解决
    浏览器同源策略下，前端和后端如果不在同一域会有跨域问题。反向代理让一切“看起来”都在同一域，并可灵活配置跨域响应头。
  3. 路径灵活控制
    可以灵活给接口加前缀、做重定向、黑白名单等，后端专注业务，路径映射交给 Nginx。
  4. 负载均衡与扩展
    Nginx 可轻松实现多后端节点的负载均衡，便于后端横向扩展。
  5. 静态资源加速
    Nginx 擅长分发静态资源，响应快，减轻后端压力。

六、常见问题与注意事项

  • 前端的 BASE_URL 必须与 Nginx 代理路径一致（如 /ruben/），否则请求会失败或 404。
  • rewrite 规则让后端收到“干净”的接口路径，否则后端还得额外解析 /ruben/ 前缀。
  • SPA 项目必须加 try_files $uri $uri/ /index.html;，否则刷新页面会 404。
  • 部署后建议用浏览器开发者工具或 curl 检查接口路径和响应头，确保代理和跨域配置生效。
  • 所有路径、域名、目录等变量都必须根据你自己的服务器环境进行替换！

Nginx 让前后端分离的项目部署更加优雅，开发更专注，沟通更顺畅。希望这篇博客能帮你少走弯路，快速掌握 Nginx 反向代理和跨域配置的精髓！