网络与协议 · 39/72
1. Ajax、Axios、Fetch 对比 2. Ajax 原理 3. Ajax 技术与实现 4. 常见的应用层协议 5. 浏览器缓存的存储位置 6. 从输入 URL 到页面显示的过程 7. Cache-Control 常见配置值 8. CDN 工作原理 9. 为什么推荐将静态资源放到 CDN 上 10. Cookie 的弊端 11. Cookie 的 Secure 属性设置 12. CORS 请求携带身份凭证的方法 13. CORS 跨域原理 14. 复杂请求预检检查内容 15. CORS 预检请求 16. CORS简单请求的条件 17. 简单请求为何无需预检 18. DNS 域名解析与网络请求路由 19. 什么是跨域 20. 什么是 DNS 劫持? 21. DNS 预解析优化网页加载速度 22. DNS 解析过程与优化 23. URL 参数为什么需要 encodeURIComponent 转码 24. Last-Modified 和 ETag 的区别 25. Fetch 发送两次请求的原因 26. 正向代理与反向代理 27. 前后端通信方式 28. GET请求能否上传图片 29. GET 请求的传参长度限制 30. HTTP 缓存策略 31. GET 与 POST 的区别 32. HTTP状态码301与302的区别 33. HTTP 数据传输 34. HTTP 队头阻塞 35. HTTP 请求头和响应头的重要字段 36. HTTP发展历程 37. HTTP与HTTPS总结 38. HTTP 和 HTTPS 的区别 39. HTTP 报文结构与状态码 40. HTTP Keep-Alive 机制 41. HTTP管道机制的作用 42. HTTP协议优缺点 43. HTTP 重定向状态码 301/302/303/307/308 44. HTTP 请求方法 45. HTTP 协议版本演进 46. HTTP与TCP的区别 47. HTTP/2 多路复用原理 48. HTTPS 协议的缺点 49. HTTP/3 如何保证传输可靠性 50. HTTP/2 的改进 51. HTTPS 加密原理 52. 什么是负载均衡? 53. Nginx 负载均衡调度算法 54. Nginx 是什么 55. 对象存储 OSS 是什么 56. OPTIONS 请求方法及使用场景 57. 轮询与 WebSocket 对比 58. HTTPS 中 SSL 的 OSI 层位置 59. SSL连接恢复 60. 强缓存和协商缓存 61. TCP 三次握手与四次挥手 62. TCP三次握手中的数据传输 63. TCP 和 HTTP 请求的关系 64. TCP/IP 协议 65. TCP 如何判断丢包 66. TCP 与 UDP 的区别 67. WebSocket 的 Handshaking 握手过程 68. TLS 1.3 相比 TLS 1.2 的改进 69. URI、URL、URN 的区别 70. WebSocket 心跳机制 71. WebSocket 协议原理 72. XML与JSON对比

HTTP 报文结构与状态码

HTTP 请求/响应报文的组成部分及常见状态码含义

问题

描述 HTTP 报文的结构,并解释常见状态码(200, 301, 302, 304, 400, 401, 403, 404, 500, 502)的含义。

解答

HTTP 报文结构

HTTP 报文分为请求报文和响应报文,都由三部分组成:

┌─────────────────────────────┐
│  起始行(请求行/响应行)      │
├─────────────────────────────┤
│  头部(Headers)             │
├─────────────────────────────┤
│  空行                        │
├─────────────────────────────┤
│  实体(Body)                │
└─────────────────────────────┘

请求报文

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json
Authorization: Bearer token123
Content-Length: 27

{"name":"John","age":25}

请求行方法 + 路径 + HTTP版本

POST /api/users HTTP/1.1

响应报文

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 45
Cache-Control: max-age=3600

{"id":1,"name":"John","age":25}

响应行HTTP版本 + 状态码 + 状态描述

HTTP/1.1 200 OK

常见请求头

头部说明
Host目标主机
Content-Type请求体类型
Authorization认证信息
Cookie客户端 Cookie
User-Agent客户端标识
Accept可接受的响应类型

常见响应头

头部说明
Content-Type响应体类型
Content-Length响应体长度
Set-Cookie设置 Cookie
Cache-Control缓存策略
Location重定向地址

常见状态码

2xx 成功

状态码含义
200 OK请求成功

3xx 重定向

状态码含义
301 Moved Permanently永久重定向,资源已永久移动到新 URL
302 Found临时重定向,资源临时移动
304 Not Modified资源未修改,使用缓存
// 301 vs 302 的区别
// 301: 浏览器会缓存重定向,下次直接访问新地址
// 302: 每次都会先请求原地址

// 304 场景:协商缓存命中
// 请求头带 If-Modified-Since 或 If-None-Match
// 服务器验证资源未变化,返回 304

4xx 客户端错误

状态码含义
400 Bad Request请求语法错误,服务器无法理解
401 Unauthorized未认证,需要登录
403 Forbidden已认证但无权限访问
404 Not Found资源不存在
// 401 vs 403 的区别
// 401: 你是谁?(未登录)
// 403: 我知道你是谁,但你没权限(已登录但权限不足)

5xx 服务器错误

状态码含义
500 Internal Server Error服务器内部错误
502 Bad Gateway网关/代理收到上游服务器的无效响应
// 500 vs 502 的区别
// 500: 服务器自身代码出错
// 502: 服务器作为网关,上游服务器挂了或返回异常

使用 fetch 处理不同状态码

async function request(url) {
  const response = await fetch(url);
  
  switch (response.status) {
    case 200:
      return response.json();
    case 301:
    case 302:
      // fetch 会自动跟随重定向
      console.log('重定向到:', response.url);
      return response.json();
    case 304:
      // 使用缓存数据
      return getCachedData(url);
    case 400:
      throw new Error('请求参数错误');
    case 401:
      // 跳转登录
      redirectToLogin();
      break;
    case 403:
      throw new Error('没有访问权限');
    case 404:
      throw new Error('资源不存在');
    case 500:
      throw new Error('服务器错误');
    case 502:
      throw new Error('网关错误,请稍后重试');
    default:
      throw new Error(`未知错误: ${response.status}`);
  }
}

关键点

  • HTTP 报文由三部分组成:起始行、头部、实体,头部和实体之间有空行分隔
  • 301 是永久重定向(浏览器缓存),302 是临时重定向(每次请求原地址)
  • 304 表示协商缓存命中,服务器告诉客户端使用本地缓存
  • 401 是未认证(需登录),403 是无权限(已登录但权限不足)
  • 500 是服务器自身错误,502 是网关收到上游无效响应