什么叫反向代理#

PPT 第 34、36 页给了定义，两页说的是同一件事：

反向代理是一种网络架构，通过代理服务器为后端的服务器做代理，客户端的请求直接请求代理服务器，然后转发给后端的服务器。（安全、灵活、负载均衡）

对着上面的表格读这句话：代理服务器 = nginx（90），后端的服务器 = SpringBoot/Tomcat（8080），客户端 = 浏览器。浏览器从头到尾只认识 90，是 nginx 在背后替它把请求交给 8080 的，再把 8080 的响应原样带回去——浏览器全程不知道 8080 的存在（PPT 第 34 页的示意图画的正是”前端 → 代理 → 后端（多个）”）。

括号里那三个词是它的价值，逐个理解：

本机跑的那份完整配置#

PPT 只截了 /api 这一段，本机跑的那份 conf/nginx.conf 里的完整 server 块是这样（其余原样照抄，前后端要同时工作，缺一块都不行）：

1
server {
2
    listen       90;
3
    server_name  localhost;
4
    client_max_body_size 10m;
5

6
    # 其它所有请求：由 nginx 自己返回前端页面（静态资源）
7
    location / {
8
        root   html;
9
        index  index.html index.htm;
10
        try_files $uri $uri/ /index.html;
11
    }
12

13
    # /api 开头的请求：转发给 8080 的后端
14
    location ^~ /api/ {
15
        rewrite ^/api/(.*)$ /$1 break;
16
        proxy_pass http://localhost:8080;
17
    }
18
}

多出来的这几行正好补全了另一条链路——页面是怎么被打开的：

• location / 管的是”不在 /api/ 里的其它请求”（例如 /、/assets/index.xxx.js、/favicon.ico）；
• root html; 表示到 nginx 目录下的 html/ 文件夹里找文件——前端页面就在那儿（所以本机实测 GET / 返回的是 html/index.html）；
• index index.html 表示目录请求默认给 index.html；
• try_files $uri $uri/ /index.html; 表示”先按路径找文件，找不到就回 index.html”——给前端路由兜底（前端页面里切菜单换的是 URL，并没有对应文件，都得交回 index.html 让 js 去处理）。

于是这个 90 端口上的服务其实在同时干两份活：自己发静态页面 + 把 /api 请求转给后端。这也是为什么浏览器眼里只有一个”源”（localhost:90），页面和接口都算”同门同户”——前端只要写相对地址 /api/depts 就能打到后端，不需要关心后端在哪个端口上。

一、知识回顾（读完直接做下面的实践题）#

1. 这一篇在做什么：58 篇把 GET /depts 接口写完，这一篇把前端工程跑起来做前后端联调测试（PPT 第 32 页把「查询部门」分成”接口开发”和”前后端联调测试”两件事）
2. 为什么要联调：前后端分离开发下前后端是分开开发和部署的，只按接口文档各测各的不算数，必须两边同时跑起来走一遍完整链路
3. 前端工程怎么准备（PPT 第 33 页三步）：压缩包拷到没有中文、不带空格的目录 → 解压 → 启动 nginx → 访问 http://localhost:90
4. 前端工程里有什么：03. 前端环境/nginx-1.22.0-web.zip = 打包好的前端页面（index.html + assets/ 里的 js、css）+ 一份绿色版 nginx（nginx.exe、conf/nginx.conf、html/ 文件夹）
5. 前端请求的地址：http://localhost:90/api/depts。前端 axios 统一配了 baseURL: "/api"，各接口只写 /depts；/depts 是相对地址，浏览器按”当前页面所在服务器”（90）补齐
6. 前端发出的五个请求：GET /api/depts（查列表）、POST /api/depts（新增，JSON 请求体）、GET /api/depts/{id}（回显）、PUT /api/depts（修改，JSON 请求体）、DELETE /api/depts?id={id}（删除）——正好对应后端四类接口
7. 反向代理的定义与好处：通过代理服务器为后端服务器做代理，客户端的请求直接请求代理服务器、再由它转发给后端服务器；好处记三个词——安全、灵活、负载均衡
8. nginx 配置三行：location ^~ /api/（定义路径匹配方式，只匹配 /api/ 开头）、rewrite ^/api/(.*)$ /$1 break;（路径重写，摘掉 /api 前缀）、proxy_pass http://localhost:8080;（代理转发，转给后端 Tomcat）
9. 完整链路：浏览器请求 90 → nginx 用 location / 返回 html/index.html → 页面把 /api/depts 发给 90 → 匹配 /api/ → rewrite 成 /depts → 转发到 8080 → @GetMapping("/depts") 查库 → JSON 回页面渲染成表格
10. 本机实测（四条）：直连 http://localhost:8080/depts 得到部门 JSON；经反向代理 http://localhost:90/api/depts 得到同样的 JSON；经 90 的 /api POST 新增成功；浏览器打开 http://localhost:90 表格真实渲染出 7 行数据（第一行是刚新增的”测试部”）

二、概念自测#

• 2-1 逐行解释这段 nginx 配置 题面：下面这段配置写在 conf/nginx.conf 的 server 块里，请逐行说明每一行在干什么、缺了哪一行会出什么问题：

  1
  listen 90;
  2
  location ^~ /api/ {
  3
      rewrite ^/api/(.*)$ /$1 break;
  4
      proxy_pass http://localhost:8080;
  5
  }

  回答要求：① listen 90; 决定了什么；② location ^~ /api/ 匹配的是哪些请求；③ rewrite 那一行把什么变成了什么（拿 /api/depts 举例）；④ proxy_pass 把请求送去了哪里。 （练习文件 test_59_nginx反向代理.conf 的题目2-1 里给了写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：把配置分三块读——“服务在哪个端口""哪些请求归我管""接下来对请求做什么”；对请求做的又分两步（先改路径，再转发） 二级 · 方法：listen 是端口；location + 修饰符是匹配规则；rewrite 是重写路径（用正则把前缀摘掉）；proxy_pass 是代理转发（转给后端的地址与端口） 三级 · 骨架（答题骨架）：listen 90 → 服务监听在 ____ 端口（所以访问地址是 http://localhost:____）；location ^~ /api/ → 只处理以 ____ 开头的请求；rewrite ^/api/(.*)$ /$1 break → 把 ____ 变成 ____；proxy_pass http://localhost:8080 → 转发给 ____（后端 Tomcat）

  参考答案（做完再点开）

  ① listen 90;：声明这个服务监听 90 端口——所以访问地址是 http://localhost:90（浏览器默认走 80，这里指定 90），也解释了”为什么前端工程访问的是 90 而不是 8080”。 ② location ^~ /api/：定义”按路径匹配”的规则，^~ 是修饰符（前缀匹配且命中后不再去试正则），/api/ 是前缀——只匹配以 /api/ 开头的请求，其它请求（/、/assets/xxx.js）归另一条 location / 管。 ③ rewrite ^/api/(.*)$ /$1 break;：重写路径。^/api/ 从行首匹配 /api/，(.*) 捕获剩下全部，$1 引用回来——/api/depts 被改写成 /depts（前缀被摘掉）；break 表示改完就停，不再套其它 rewrite。 ④ proxy_pass http://localhost:8080;：把（改写后的）请求转发给本机 8080 的 Tomcat，于是后端收到的是 http://localhost:8080/depts，由 58 篇的 @GetMapping("/depts") 处理。 缺哪行都不行：没 listen 90 就不在 90 上服务；没 location 这段则 /api/depts 会被当成静态文件路径（找不到文件，404/回 index.html）；没 rewrite 则转发出去的是 /api/depts，后端没这个接口（404）；没 proxy_pass 则请求根本到不了后端。

• 2-2 浏览器打开的是 90，数据为什么来自 8080 题面：使用者只在地址栏敲了 http://localhost:90，F12 里看到请求也是打到 90 的，可页面上的部门数据明明是 8080 上那个 SpringBoot 接口查出来的。请把这条链路按顺序讲一遍（从地址栏回车开始，到表格出现数据结束）。 （练习文件 test_59_nginx反向代理.conf 的文件末尾给了写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：把链路分成”页面怎么来的”和”数据怎么来的”两段；数据那一段的关键是”请求地址没变，但被转发了” 二级 · 方法：页面段是 location / + root html；数据段是 location ^~ /api/ + rewrite（改路径）+ proxy_pass（改主机端口） 三级 · 骨架（答题骨架）：① 请求 90 → nginx 用 location / 返回 ____；② 页面 js 发 ____ 给 90；③ nginx 匹配 ____ → rewrite 成 ____；④ proxy_pass 转到 http://localhost:____；⑤ 后端 ____ 方法查库返回 JSON → 页面渲染

  参考答案（做完再点开）

  ① 浏览器请求 http://localhost:90 → nginx 用 location / 从 html/ 目录里取出 index.html 返回（页面是 nginx 自己发的静态文件）； ② 页面里的 js（axios，baseURL 是 /api）发出 GET http://localhost:90/api/depts——还是 90； ③ nginx 匹配 location ^~ /api/，rewrite 把路径改成 /depts； ④ proxy_pass 把它转发到 http://localhost:8080/depts（后端 Tomcat）； ⑤ 58 篇的 @GetMapping("/depts") 接住请求 → Service → Mapper 执行 select … from dept order by update_time desc → Result.success(deptList) 包成 JSON 原路返回 → 页面把数组渲染成表格行。 一句话：8080 从没出现在地址栏里，数据是 nginx 替浏览器”跑腿”取回来的——这就是反向代理。本机实测：直连 8080/depts 与走 90/api/depts 得到的部门 JSON 一模一样。

• 2-3 反向代理的”安全、灵活、负载均衡”分别指什么 题面：PPT 用”安全、灵活、负载均衡”三个词概括反向代理的价值，请各用一两句话说明：这个好处具体体现在哪里？（提示两个场景：后端不想被外部直接访问；以后后端从一台变成三台。） （练习文件 test_59_nginx反向代理.conf 的文件末尾给了写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：从”谁暴露在外面”想安全；从”改哪一边的代码”想灵活；从”请求可以分给谁”想负载均衡 二级 · 方法：安全→后端可只在内网/本机访问，外部只认识代理入口；灵活→后端地址或数量变了只改代理配置，前端不动（/api 前缀也是代理层统一处理的）；负载均衡→一台代理后面挂多台后端分流 三级 · 骨架（答题骨架）：安全：外部只知道 ____，后端 ____ 不直接暴露；灵活：后端换了地址/端口只改 ____，前端代码 ____；负载均衡：代理后面可以挂 ____ 台后端，把请求 ____

  参考答案（做完再点开）

  安全：真正干活的后端（8080）不必暴露给外部，可以只让本机或内网访问；外部看到的入口只有代理服务器（90）这一个，防护、限流、鉴权都能收在这一层做。 灵活：后端服务的地址、端口、数量变了，只改代理这一处配置，前端代码一行都不用动（这也是前端敢写相对地址 /api/depts 的原因）；像 /api 这种统一前缀，也是在代理层加/减的。 负载均衡：一台代理后面可以挂多台后端（PPT 的示意图就是”代理 → 后端、后端、后端”），请求按规则分给它们——并发上来了加机器就行，客户端完全无感。

• 2-4 前端为什么不把后端地址写死 题面：如果前端代码里直接写 axios.get("http://localhost:8080/depts")，页面也能拿到数据，为什么课程还要绕一层 nginx、前端只写 /api/depts？请至少说出两条理由。 （练习文件 test_59_nginx反向代理.conf 的文件末尾给了写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：想两件事——“换环境时前端要不要改代码”和”浏览器眼里的地址（协议+主机+端口）还是不是同一个” 二级 · 方法：写死 8080 = 前端知道了后端部署在哪（换个环境/换台机器就得改前端）；写相对地址 = 永远发给”页面所在的服务器”，由代理负责找后端 三级 · 骨架（答题骨架）：① 换环境/换地址时：写死要改 ____，相对地址只改 ____；② 从浏览器角度看，写死 8080 后请求地址和页面地址的 ____ 不同（跨来源），相对地址始终是 ____

  参考答案（做完再点开）

  ① 换环境不用改前端：写死 http://localhost:8080 等于把后端的地址写进了前端代码——后端换端口、换机器、上了网关，前端都得跟着重新打包。写成相对地址 /api/depts，浏览器永远发给”页面所在的服务器”（90），后端在哪、有几台，由 nginx 的 proxy_pass 决定； ② 地址始终同源：页面在 localhost:90，写死 8080 后请求的协议/主机/端口跟页面不一样（浏览器眼里是另一个来源）；而写成 /api/depts 时请求和页面同属 localhost:90，浏览器只认这一层，很多跨来源的限制（跨域）在这套结构下自然就不存在了； ③ 顺带一个好处：/api 统一前缀让”哪些请求该转给后端”一眼可辨，也方便以后在代理层统一加鉴权、限流、日志。

• 2-5 少一步会怎样 题面：请分别说明下面两种情况页面会是什么表现，并解释原因：① 配置里把 rewrite ^/api/(.*)$ /$1 break; 这一行注释掉；② nginx 起来了，但后端的 SpringBoot 应用没启动。 （练习文件 test_59_nginx反向代理.conf 的文件末尾给了写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：rewrite 决定”转发出去的路径长什么样”，后端没启动决定”转发出去有没有人接”；两题都从”后端实际会收到什么”入手 二级 · 方法：没有 rewrite → 转发出去还是 /api/depts，而后端接口叫 /depts（没有 /api 前缀）→ 找不到资源；后端不在 → 8080 端口没人监听 → 代理转发失败 三级 · 骨架（答题骨架）：① 后端会收到 ____，它的接口是 ____，所以返回 ____；② 8080 没人监听，转发失败，nginx 返回 ____（Bad Gateway）

  参考答案（做完再点开）

  ① rewrite 去掉后，proxy_pass 转发出去的是原路径 /api/depts；而后端接口是 /depts（58 篇的 @GetMapping("/depts")，不带 /api）——SpringMVC 找不到这个路径，返回 404，页面上表格空着、F12 里那条请求是红的。 ② 反向代理只是转发：8080 上没有服务在监听，请求转过去无人接收，nginx 只能报错返回 502 Bad Gateway，页面拿不到任何数据。所以联调时的启动顺序是——先起后端，再起（或刷新）前端。

• 2-6 补全这段反向代理配置 题面：下面是 conf/nginx.conf 里一个 server 块的骨架（静态页面那部分已经写好），请你补出能让 /api 开头的请求打到 8080 后端的三行配置，并给每行写注释：

  • 前端页面跑在 90 端口，页面地址是 http://localhost:90，前端发出的请求形如 GET http://localhost:90/api/depts；
  • 后端 SpringBoot 应用跑在 http://localhost:8080，接口路径不带 /api（如 /depts）。

  1
  server {
  2
      listen       90;
  3
      server_name  localhost;
  4
  
  5
      location / {
  6
          root   html;
  7
          index  index.html index.htm;
  8
          try_files $uri $uri/ /index.html;
  9
      }
  10
  
  11
      # 在这里补全 /api 反向代理的配置
  12
  
  13
  }

  （练习文件 test_59_nginx反向代理.conf 的题目2-6 里给了写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：三件事——“哪些请求归我管""路径要不要改""转发给谁” 二级 · 方法：location ^~ /api/（前缀匹配）+ rewrite ^/api/(.*)$ /$1 break;（摘前缀）+ proxy_pass http://localhost:8080;（转给后端） 三级 · 骨架：location ^~ ____ { ↳ rewrite ^/api/(.*)$ ____$1 break; ↳ proxy_pass http://____:____; ↳ }

  参考答案（做完再点开）

  1
  # 以 /api/ 开头的请求：交给后端处理（前缀匹配）
  2
  location ^~ /api/ {
  3
      # 把路径里的 /api 前缀摘掉：/api/depts → /depts
  4
      rewrite ^/api/(.*)$ /$1 break;
  5
      # 转发给本机 8080 上的后端（SpringBoot / Tomcat）
  6
      proxy_pass http://localhost:8080;
  7
  }

  自查三点：① 前缀写的是 /api/（带末尾斜杠）——和前端 baseURL: "/api" 对得上；② rewrite 的替换目标是 /$1（以 / 开头），这样 /api/depts 才会变成 /depts 而不是 depts；③ proxy_pass 后面只写到主机端口，不追加路径——转发用的就是重写后的 URI。 本机实测这段配置生效：curl http://localhost:90/api/depts 与 curl http://localhost:8080/depts 返回的是同一份部门 JSON。

三、综合题#

• 3-1 照着做一遍前后端联调，并用页面上点出来 这一题就是把 58 篇的接口和课程给的前端工程接起来，做完你就走过了从”接口能用”到”页面能用”的全过程。

  1. 启动后端：用 IDEA 运行 Tlias 工程（TliasWebManagementApplication），确认控制台出现 Tomcat started on port 8080 (http)；
  2. 准备前端：把课程资料 03. 前端环境/nginx-1.22.0-web.zip 拷到一个没有中文、不带空格的目录下解压，看清解压出来有 nginx.exe、conf/nginx.conf、html/；
  3. 打开 conf/nginx.conf，找到 server 块，逐行核对：listen 90;、location ^~ /api/、rewrite、proxy_pass http://localhost:8080;——如果 /api 那段是空的，按上面「概念自测」的题目 2-6 补上；
  4. 启动 nginx，浏览器访问 http://localhost:90，打开「系统信息管理 → 部门管理」，确认表格里出现了 58 篇数据库里的部门数据；同时按 F12 →「网络」→ 刷新，找到 depts 这条请求，把它的请求网址、请求方法、状态代码抄下来；
  5. 再做两组对照实验，把结果抄下来：① 用命令行 curl http://localhost:8080/depts 直连后端；② curl http://localhost:90/api/depts 经反向代理——比较两份响应；
  6. 收尾：按下 <Ctrl+C> 或命令行 nginx.exe -s stop 关掉前端，把答案写进练习文件末尾。

  做完回答两个问题：① 页面上表格里的数据，从点开菜单到显示出来一共经过了哪几个”关口”？② 为什么地址栏里从头到尾只有 90、没有 8080？ （练习文件 test_59_nginx反向代理.conf 的”综合题”一段里按这 6 步给了写作区。）

  涉及知识点

  知识点	在这里的应用
  联调三步（PPT 33）	第 2、4 步——拷到无中文无空格目录、解压、启动 nginx、访问 http://localhost:90
  反向代理配置（PPT 35）	第 3 步——核对/补全 listen、location ^~ /api/、rewrite、proxy_pass
  前端请求地址（PPT 34）	第 4 步——F12 里看到 http://localhost:90/api/depts、GET、200
  两条路拿到同一份数据（本机实测）	第 5 步——直连 8080 与经 90 的 /api 对比
  反向代理的定义与好处（PPT 36）	第 6 步两个问题的答案

  提示（先自己想，实在想不出再点开）

  一级 · 思路：这题考的是”顺序”——后端先起（否则代理转发没人接），前端后起；每一步都留一条可核对的痕迹（启动日志、F12 里的请求、两条 curl 的响应） 二级 · 方法：后端用 IDEA 直接运行主类；前端是运行 nginx.exe，配置在同目录 conf/nginx.conf；F12「网络」面板里按名称找 depts 这条请求 三级 · 骨架：① 后端启动日志 Tomcat started on port ____；② 前端目录里三个关键项 nginx.exe / conf/____ / ____（放页面的文件夹）；③ 配置三行 listen ____ / location ^~ ____ / proxy_pass http://____:____；④ F12 里请求网址 http://localhost:____/api/depts、方法 ____、状态码 ____

  参考答案（做完再点开）

  3-1

  1. 后端启动成功的标志（本机实测）：Tomcat started on port 8080 (http)、Started TliasWebManagementApplication in 2.278 seconds。
  2. 前端解压出来的关键三样：nginx.exe（绿色版可执行文件，双击即启动）、conf/nginx.conf（配置）、html/（前端页面存放处，index.html + assets/ 就在里面）。
  3. server 块里那段配置：

     1
     listen       90;
     2
     location ^~ /api/ {
     3
         rewrite ^/api/(.*)$ /$1 break;
     4
         proxy_pass http://localhost:8080;
     5
     }

     另有 location / 负责返回静态页面（root html; try_files $uri $uri/ /index.html;）。
  4. F12「网络」里 depts 这条请求：请求网址 http://localhost:90/api/depts、请求方法 GET、状态代码 200、远程地址 127.0.0.1:90；页面上表格出现真实数据（本机实测 7 行：dept.sql 的 6 条 + 通过接口新增的”测试部”）。
  5. 两组对照（本机实测）：

     1
     $ curl http://localhost:8080/depts      # 直连后端
     2
     {"code":1,"msg":"success","data":[{"id":3,"name":"咨询部",…}, …]}   # 部门 JSON
     3
     
     4
     $ curl http://localhost:90/api/depts    # 经反向代理
     5
     {"code":1,"msg":"success","data":[{"id":3,"name":"咨询部",…}, …]}   # 同一份 JSON

     两条响应内容一致，说明 /api/depts 最终就是被当成 /depts 交给后端处理的。
  6. 两个问题： ① 链路：地址栏 90 → nginx 从 html/ 返回页面 → 页面 js 发 /api/depts 给 90 → nginx 匹配 location ^~ /api/ → rewrite 成 /depts → proxy_pass 转给 8080 → @GetMapping("/depts") → Service → Mapper 执行 SQL 查库 → Result.success(deptList) 返回 JSON → 页面渲染成表格行； ② 因为前端和接口的对外入口都是代理服务器：页面存 localhost:90，请求走相对地址（/api 前缀 + 接口路径）也发到 localhost:90，由 nginx 在服务器内部转发给 8080——8080 是”幕后”的后端服务，浏览器全程不需要（也看不到）它。