FDE·技术基础
基础目录
速查版 · 一屏看懂
①请求旅程 ②读懂monorepo ③数据库存东西 ④并发锁事务 ⑤前端为什么能跑 ⑥读懂AI代码

基础 14 · 一次请求的完整旅程

速查版:一屏看懂输入网址到页面出现,中间到底发生了什么。看完能讲清 301 跳转和 try_files 是谁在决定。

项目锚点

你服务器上的 memberhandbook.cn:
①主站是 React 单页应用,84 个 URL 给爬虫只返回 3120 字节空壳 HTML(内容全靠 JS 执行后才有)
② www.memberhandbook.cn 会 301 跳到非 www(规范域名)
③ nginx 里有 try_files $uri $uri/ /index.html 这条兜底规则

这三条现象你天天见,但以前可能说不清是谁在决定。这一篇就讲这个。

01

六个阶段,一张图看懂

阶段 1
DNS:域名→ IP
你输入 memberhandbook.cn,浏览器先去问 DNS「这个域名对应哪个 IP?」→ 拿到 124.222.108.196。这一步是「查电话簿」,还没开始传数据。
阶段 2
TCP:建立连接
浏览器和服务器「握一次手」,确认双方都在线,并约定后续用什么方式传输。这一步慢,是因为要走网络。
阶段 3
TLS:加锁
因为是 https,双方要协商出加密密钥。之后所有内容都是密文,别人截获也看不懂。这就是「小绿锁」。
阶段 4
HTTP:说需求
浏览器发出请求:GET /fde/,外加一堆头(我想要什么格式、有没有 Cookie)。服务器回一个状态码 + 内容。
阶段 5
反向代理:nginx 决定给谁
nginx 是「门卫」。它按配置决定:直接读文件返回?还是转给 Node 进程?走 try_files 逐个尝试?
阶段 6
浏览器渲染:变成你看到的
如果是 HTML,直接显示;如果是 React 单页,浏览器下载 index.html(空壳)+ 一个大 JS 文件,执行 JS 后才把内容填进页面。
一句话记住:DNS 查地址 → TCP 连线→ TLS 加锁 → HTTP 提要求 → nginx 指路 → 浏览器变出页面。
02

你项目里的三个现象,分别归谁管

用开篇那三条真实现象,对号入座:

现象发生在哪一阶段是谁决定的
www 跳非 www(301)阶段 4~5服务器上的一条 301 跳转配置(宝塔/Nginx 里设的)。不是 DNS 干的,也不是代码干的
爬虫只拿到 3120 字节空壳阶段 6因为是 React 单页,内容要等 JS 执行才生成。爬虫不执行或不理解 JS,就只看到空 <div id="root">
FDE 静态页能被爬到阶段 5~6/fde/index.html 是真实文件,nginx 直接递出完整文字,不依赖 JS
所以「主站为什么收录差、FDE 页为什么收录好」这个问题的答案不在 SEO 技巧,在架构——一个是 JS 渲染的壳,一个是纯静态文件。爬虫读不读得懂,取决于你给他的是成品还是图纸。
03

try_files 到底在试什么

你 nginx 里的这句配置,是按顺序试三样东西,命中就返回,全不命中才走最后一招:

try_files $uri $uri/ /index.html;
#         ①   ②③
顺序试什么访问 /fde/ 时会发生什么
① $uri当文件找(无斜杠结尾)找一个叫 /fde 的文件——没有
② $uri/当目录找,并找其下的默认文件找到 /fde/ 目录 → 找里面的 index.html →命中,返回
③ /index.html都不行就兜底给主站首页没走到这里
为什么主站需要③这个兜底?因为主站是 React 单页,/bt/、/ai/ 这些路径磁盘上根本没有对应文件(都是同一个 index.html 里的前端路由)。靠最后这招,nginx 才能把所有前端路由都交给同一个 index.html。这也是为什么主站必须预渲染——nginx 只会递文件,它不知道你的 JS 后面会画出什么。
04

常见状态码(只需要认这五个)

码意思你项目里的例子
200成功/fde/ 正常打开
301永久搬家,去新地址www → 非 www(搜索引擎要认这个是「正主」)
302临时去哪了登录后跳回首页
401没登录/没权限LumenX 全站 Basic Auth 就是 401
404没这个页面Bing 验证文件没传上去时,就是 404导致验证失败
红线:返回 200 不等于内容对。LumenX 页面返回 200 但整站被Basic Auth 挡住(浏览器弹登录框),爬虫拿到的是登录页不是正文——所以必须用真实浏览器 UA 去实测字节和内容。
✓

自查清单

  • ✓我能背出DNS→TCP→TLS→HTTP→反代→渲染 六步
  • ✓我知道 www→非www的 301 是服务器配置干的,不是 DNS
  • ✓我能解释为什么爬虫读 React SPA 只拿到空壳,而 /fde/ 静态页能读全
  • ✓我知道 try_files 三个参数按什么顺序试
  • ✓我认得 200/301/302/401/404,并能说各自分别在哪个项目遇到过