速查版:一屏看懂输入网址到页面出现,中间到底发生了什么。看完能讲清 301 跳转和 try_files 是谁在决定。
你服务器上的 memberhandbook.cn:
①主站是 React 单页应用,84 个 URL 给爬虫只返回 3120 字节空壳 HTML(内容全靠 JS 执行后才有)
② www.memberhandbook.cn 会 301 跳到非 www(规范域名)
③ nginx 里有 try_files $uri $uri/ /index.html 这条兜底规则
这三条现象你天天见,但以前可能说不清是谁在决定。这一篇就讲这个。
memberhandbook.cn,浏览器先去问 DNS「这个域名对应哪个 IP?」→ 拿到 124.222.108.196。这一步是「查电话簿」,还没开始传数据。https,双方要协商出加密密钥。之后所有内容都是密文,别人截获也看不懂。这就是「小绿锁」。GET /fde/,外加一堆头(我想要什么格式、有没有 Cookie)。服务器回一个状态码 + 内容。try_files 逐个尝试?index.html(空壳)+ 一个大 JS 文件,执行 JS 后才把内容填进页面。用开篇那三条真实现象,对号入座:
| 现象 | 发生在哪一阶段 | 是谁决定的 |
|---|---|---|
| www 跳非 www(301) | 阶段 4~5 | 服务器上的一条 301 跳转配置(宝塔/Nginx 里设的)。不是 DNS 干的,也不是代码干的 |
| 爬虫只拿到 3120 字节空壳 | 阶段 6 | 因为是 React 单页,内容要等 JS 执行才生成。爬虫不执行或不理解 JS,就只看到空 <div id="root"> |
| FDE 静态页能被爬到 | 阶段 5~6 | /fde/index.html 是真实文件,nginx 直接递出完整文字,不依赖 JS |
你 nginx 里的这句配置,是按顺序试三样东西,命中就返回,全不命中才走最后一招:
try_files $uri $uri/ /index.html; # ① ②③
| 顺序 | 试什么 | 访问 /fde/ 时会发生什么 |
|---|---|---|
① $uri | 当文件找(无斜杠结尾) | 找一个叫 /fde 的文件——没有 |
② $uri/ | 当目录找,并找其下的默认文件 | 找到 /fde/ 目录 → 找里面的 index.html →命中,返回 |
③ /index.html | 都不行就兜底给主站首页 | 没走到这里 |
/bt/、/ai/ 这些路径磁盘上根本没有对应文件(都是同一个 index.html 里的前端路由)。靠最后这招,nginx 才能把所有前端路由都交给同一个 index.html。这也是为什么主站必须预渲染——nginx 只会递文件,它不知道你的 JS 后面会画出什么。| 码 | 意思 | 你项目里的例子 |
|---|---|---|
| 200 | 成功 | /fde/ 正常打开 |
| 301 | 永久搬家,去新地址 | www → 非 www(搜索引擎要认这个是「正主」) |
| 302 | 临时去哪了 | 登录后跳回首页 |
| 401 | 没登录/没权限 | LumenX 全站 Basic Auth 就是 401 |
| 404 | 没这个页面 | Bing 验证文件没传上去时,就是 404导致验证失败 |