第 6 课：页面出错之后：客户端错误、服务器错误与重定向

本课目标：

• 区分客户端错误（4xx）和服务器错误（5xx）。
• 认出重定向（3xx），并解释它为什么发生。
• 用平实的语言解释一次失败的页面加载。

上一篇 << 5

能读懂响应，出错的页面就不再是谜

页面加载失败时，状态码的第一位数字就告诉你该往哪边查。第 3 课学过的类别不只是书本知识，它们是你手上最快的诊断工具。

• 2xx：请求成功了。
• 3xx：浏览器被指向了别处（重定向）。
• 4xx：请求这一侧出了错（客户端错误）。
• 5xx：服务器在处理时出了故障（服务器错误）¹。

讲解

客户端错误：4xx

4xx 状态表示服务器收到了请求，但因为请求本身有问题而无法完成。最有名的是 404 Not Found：URL 指向一个不存在的资源²。另一个是 403 Forbidden：服务器听懂了这个请求，但拒绝处理它，而这个拒绝挂在应用自己的逻辑上，比如权限不够³。

紧挨着它的是 401 Unauthorized，两者的差别才是真正有用的部分：碰到 401，去认证就是解法；碰到 403，认证或者重新认证都不起作用——同样的请求再发一遍还是同样地失败³。有的站点甚至会在本该回 403 的地方回 404，因为承认「这个资源存在」本身就已经泄露了信息³。

服务器错误：5xx

5xx 状态表示服务器自身出了问题。500 Internal Server Error 是那句通用的「我们这边出错了」⁴。这类问题通常要网站方来修。

重定向：3xx

3xx 状态表示资源换了位置。服务器会发一个 Location 头，告诉浏览器接下来去哪里，浏览器会立刻去加载那个 URL——代价是多一次往返⁵。常见的有 301 Moved Permanently 和 302 Found¹。

四个重定向码在两个彼此独立的问题上有分歧⁵：

• 是不是永久的？ 301 和 308 是永久的，爬虫会更新自己存的 URL。302 和 307 是临时的，爬虫保留原来那个⁵。
• 方法保不保留？ 这一条最容易被漏掉。用 301 和 302 时，GET 不变，但其他方法可能被用户代理改写成 GET——请求体会因此丢掉⁵。307 Temporary Redirect 和 308 Permanent Redirect 存在的意义正是消掉这个不确定性：方法和请求体都不改⁵。

所以 307 不是「更新版的 302」，它是那个可以放心摆在一个 POST 前面的版本。而 303 See Other 是故意选了相反的一边：它会把其他方法改成 GET，好让 POST 之后刷新页面不会把那个操作再触发一遍⁵。

中文这里的词面也帮不上忙：「重定向」三个字只说了「换地方」，完全不带方法语义，光看这个词看不出 301 会把一个 POST 变成 GET。

状态码解释不了的错误

有些失败根本不在状态码里，因为并没有谁拒绝了什么。

CORS 错误就是那个标准例子。跨源资源共享是一套基于头部的机制，服务器用它告诉浏览器：除了自己之外，还有哪些源——域名、scheme、端口的组合——可以加载它的响应⁶。它放宽的那条规则叫同源策略，浏览器把这条规则用在由脚本发起的请求上⁶。排查时最关键的一个事实是：服务器通常是正常作答了的，往往就是 200 OK，是浏览器因为 Access-Control-Allow-Origin 头没放行这个源，而把响应扣下来不给脚本⁶。服务端什么都没坏，服务器日志里也不会有任何一条拒绝记录。对某些请求，浏览器会先发一条预检请求——一次 OPTIONS 探问，问真正那条请求会不会被允许⁶。

HTTPS 是另一个作用范围常被高估的地方。它就是裹在 TLS 里的 HTTP，TLS 负责加密客户端与服务器之间的通信⁷。加密意味着 URL 路径、头部、cookie 和消息体在传输途中不可读。但它不意味着这次交换是隐形的：连接要能建立起来，目标就必须可解析、可到达，所以「你连的是哪台服务器」并不在 TLS 隐藏的范围之内⁷。HTTPS 也完全不表态这个站点是否可信——它只保证通往它的那条信道是加密的⁷。

完整示例（跟着做）

你想打开一篇新闻报道，可能看到下面几种情况：

• 404 Not Found：报道被删除了，或者 URL 有笔误。作为用户，你可以检查 URL，或者回到首页。
• 500 Internal Server Error：新闻网站的服务器出了问题。你修不了；网站方可以。
• 301 Moved Permanently：报道换了新的 URL。浏览器会自动跟随重定向去新位置。

你来试试（填空示例）

给每个状态码写出类别和该由谁来修：

小结 + 下一步

现在你能从两侧读懂一次 HTTP 交换：请求（方法、路径、请求头）和响应（状态码、响应体）。你能打开 Network 面板，找到一条真实请求，并解释发生了什么。状态码是 4xx，就查请求；是 5xx，就看服务器；是 3xx，就是浏览器在按指示走。

Footnotes

1. MDN: HTTP response status codes — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status ↩ ↩²

2. MDN: 404 Not Found — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/404 ↩

3. MDN: 403 Forbidden — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/403 ↩ ↩² ↩³

4. MDN: 500 Internal Server Error — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/500 ↩

5. MDN: Redirections in HTTP — https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Redirections ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶

6. MDN: Cross-Origin Resource Sharing (CORS) — https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS ↩ ↩² ↩³ ↩⁴

7. MDN: HTTPS (glossary) — https://developer.mozilla.org/en-US/docs/Glossary/HTTPS ↩ ↩² ↩³