【无标题】

HTTP/HTTPS网络核心（详细完整版）

本篇整理前端面试网络模块高频核心考点，聚焦HTTP/HTTPS，覆盖基础概念、请求响应、缓存、状态码、HTTPS原理、跨域、常见对比题。

一、HTTP基础

1. 什么是HTTP？核心特点是什么？

HTTP全称超文本传输协议（HyperText Transfer Protocol），是基于TCP 的应用层协议，属于无状态、无连接的请求-响应式协议，主要用于浏览器和服务器之间传输超文本（HTML、CSS、JS、图片等）资源，是前端页面加载、接口请求的核心协议。

核心特点：

• 无状态：协议本身不保存客户端和服务器之间的通信状态，每次请求都是独立的，服务器无法识别连续请求是否来自同一客户端（可通过Cookie/Session解决）
• 无连接：默认请求完成后立即断开连接，HTTP1.1新增keep-alive实现长连接，避免频繁建立断开TCP连接
• 基于请求-响应模型：客户端主动发起请求，服务器被动响应，一对一通信
• 明文传输：HTTP1.x传输数据不加密，数据易被窃取、篡改，安全性差
• 灵活可扩展：支持自定义请求头、响应头，可传输文本、图片、音视频等各类资源

2. HTTP请求的完整流程

浏览器发起HTTP请求到页面渲染的完整流程，共8步，和浏览器进程、渲染机制强关联

1. NS域名解析 ：将输入的域名（如www.baidu.com）解析为对应的IP地址，先查浏览器缓存→系统缓存→路由器缓存→DNS服务器，逐级查询
2. 建立TCP连接：通过三次握手，客户端和服务器建立可靠的TCP连接（HTTP基于TCP，保证数据传输完整）
3. 发送HTTP请求：客户端构造请求报文（请求行、请求头、请求体），发送给服务器
4. 服务器处理请求：服务器接收请求，解析请求内容，处理业务逻辑（查询数据库、接口计算等）
5. 服务器返回响应：服务器构造响应报文（响应行、响应头、响应体），返回给客户端
6. 关闭TCP连接：非长连接下，通过四次挥手断开连接；长连接会保持连接，等待后续请求
7. 浏览器解析响应：浏览器接收响应数据，解析HTML、CSS、JS等资源
8. 页面渲染：按照前文浏览器渲染流程，生成DOM树、CSSOM树，完成布局、绘制、合成，展示页面

3. HTTP请求报文和响应报文的组成

（1）请求报文（客户端→服务器）

• 请求行：包含请求方法（GET/POST等）、请求URL、HTTP协议版本（如HTTP/1.1）
• 请求头：键值对格式，传递附加信息，常见：Host（域名）、User-Agent（客户端信息）、Content-Type（请求体类型）、Cookie、Authorization等
• 空行：分隔请求头和请求体，必须存在
• 请求体：携带请求数据，GET请求无请求体，POST/PUT/PATCH等方法有，存放参数、表单数据、JSON数据等

（2）响应报文（服务器→客户端）

• 响应行：包含HTTP协议版本、响应状态码、状态描述（如200 OK、404 Not Found）
• 响应头：键值对格式，传递附加信息，常见：Content-Type（响应体类型）、Cache-Control（缓存控制）、Set-Cookie、ETag、Last-Modified等
• 空行：分隔响应头和响应体
• 响应体：返回给客户端的数据，如HTML内容、JSON接口数据、图片二进制流等

4.常见HTTP请求方法及区别（GET vs POST高频）

GET和POST的核心区别：

• 参数位置：GET参数在URL，POST在请求体
• 安全性：POST更安全，GET参数可见，易被窃取
• 数据大小：GET受 URL 长度限制，POST无限制
• 缓存性：GET可被浏览器缓存，POST默认不缓存
• 幂等性：GET幂等，POST非幂等
• 用途：GET查数据，POST提交数据

幂等 指的是同一个操作无论执行多少次，结果都和只执行一次相同。这是API设计的核心原则，对系统稳定性至关重要。

比如：

订单支付接口必须设计为幂等，防止用户重复点击产生多次扣款。我们通常用唯一流水号实现：服务器收到相同流水号时直接返回首次结果，不重复处理;

令牌机制（防重复提交）GET多次读取数据不变，PUT多次更新结果相同。

5. 常见HTTP状态码（分大类记忆）

状态码分为5大类，前端重点掌握1xx、2xx、3xx、4xx、5xx核心代码：

• 1xx （信息响应）：请求接收中，继续处理

  100 Continue：客户端可继续发送请求

• 2xx （成功响应）：请求成功处理

  200 OK：请求成功，正常返回数据

  201 Created：资源创建成功（POST/PUT）

  204 No Content：请求成功，无响应体

• 3xx （重定向）：请求需进一步操作，重定向

  301 Moved Permanently：永久重定向（域名更换）

  302 Found：临时重定向

  304 Not Modified：资源未修改，使用缓存（协商缓存核心状态码）

• 4xx （客户端错误）：客户端请求有误

  400 Bad Request：请求参数/格式错误

  401 Unauthorized：未授权，需登录/验证token

  403 Forbidden：禁止访问，权限不足

  404 Not Found：请求资源不存在

  405 Method Not Allowed：请求方法不支持

• 5xx （服务器错误）：服务器处理请求失败

  500 Internal Server Error：服务器内部错误

  502 Bad Gateway：网关错误

  503 Service Unavailable：服务器暂时不可用

6. HTTP1.0、HTTP1.1、HTTP2.0、HTTP3.0核心区别

（1）HTTP1.0

短连接，每次请求都要重新建立TCP连接（三次握手+四次挥手），性能差；无Host头，不支持虚拟主机；缓存机制简单。
（2）HTTP1.1（目前最常用）

新增长连接（keep-alive），一次TCP连接可发送多个请求；新增Host头，支持虚拟主机；新增PUT/DELETE等请求方法；缓存机制更完善；存在队头阻塞问题（同一连接下，请求需排队，前一个请求阻塞，后续全部等待）。
（3）HTTP2.0

基于二进制分帧传输，而非文本传输；多路复用，同一TCP连接可并行发送多个请求/响应，解决队头阻塞；头部压缩，减少传输体积；支持服务器推送，主动向客户端推送资源。
（4）HTTP3.0

基于UDP协议的QUIC协议，彻底解决TCP队头阻塞；0-RTT握手，连接更快；集成TLS加密，安全性更高；连接迁移，切换网络不中断。

二、HTTPS核心

1. 什么是HTTPS？和HTTP的核心区别

HTTPS全称超文本传输安全协议（HyperText Transfer Protocol Secure），是HTTP的加密 版本，HTTP+SSL/TLS协议结合，在应用层和传输层之间加了一层加密层，实现数据加密传输。

HTTP vs HTTPS核心区别：

• 安全性：HTTP明文传输，易被窃听、篡改、劫持；HTTPS加密传输，数据安全
• 端口：HTTP默认80端口，HTTPS默认443端口
• 连接流程：HTTPS比HTTP多了SSL/TLS握手流程
• 资源消耗：HTTPS需要加密解密，消耗更多服务器资源
• SEO：搜索引擎优先收录HTTPS站点
• 证书：HTTPS需要申请CA机构颁发的SSL证书，HTTP不需要

2. HTTPS的加密原理（对称加密+非对称加密）

HTTPS采用对称加密+非对称加密结合的混合加密方式，兼顾安全性和效率：

• 对称加密：加密和解密用同一把密钥，效率高，但密钥传输易被窃取，单独使用不安全
  用途：实际传输数据时，用对称加密
• 非对称加密：有公钥和私钥两把密钥，公钥加密只能私钥解密，私钥加密只能公钥解密，安全性高，但效率低
  用途：传输对称加密的密钥，保证密钥安全
• 额外加数字证书+数字签名：防止公钥被篡改，验证服务器身份，避免中间人攻击。

3. HTTPS的SSL/TLS握手流程

• 客户端发起HTTPS请求，携带支持的TLS版本、加密套件列表
• 服务器响应，确认TLS版本和加密套件，返回SSL证书（包含服务器公钥、证书颁发机构、有效期、数字签名）
• 客户端验证证书合法性：通过CA公钥验证数字签名，检查证书是否过期、域名是否匹配，确认服务器身份可信
• 客户端生成随机对称密钥，用服务器公钥加密该密钥，发送给服务器
• 服务器用自己的私钥解密，获取对称密钥
• 后续所有数据传输，双方都用这个对称密钥加密解密，握手完成
• 优点：
  数据加密传输，防止窃听、篡改、中间人攻击，安全性极高;
  验证服务器身份，避免访问假冒网站;
  提升SEO排名，增强用户信任。
• 缺点：
  SSL证书需要付费（有免费证书），部署复杂;
  握手流程耗时，首次连接速度稍慢;
  加密解密消耗服务器CPU和内存资源。

三、HTTP缓存（前端性能优化）

1. 浏览器缓存的作用

减少重复网络请求，降低服务器压力；加快页面加载速度，提升用户体验；节省流量，弱网环境下更流畅。

2. HTTP缓存分类及优先级（强缓存→协商缓存→网络请求）

（1）强缓存 （无需请求服务器，直接用本地缓存）

优先级最高，浏览器判断缓存未过期，直接读取本地缓存，不发送请求，响应状态码200（from memory cache/disk cache）。

核心响应头：
Cache-Control: max-age=xxx（相对时间，单位秒，HTTP1.1主推，优先级更高）
Expires: 绝对时间（HTTP1.0，受本地时间影响，已不推荐）

（2）协商缓存 （强缓存过期，请求服务器验证）

强缓存过期后，浏览器发送请求到服务器，服务器验证资源是否更新：未更新返回304，使用本地缓存；已更新返回200+新资源。

核心响应头+请求头：

方法一：Last-Modified（响应头，资源最后修改时间） + If-Modified-Since（请求头，携带上次修改时间）

方法二：ETag（响应头，资源唯一标识，优先级高于Last-Modified） + If-None-Match（请求头，携带上次ETag）

3. 内存缓存（Memory Cache）和硬盘缓存（Disk Cache）区别

Memory Cache：内存缓存，读取速度极快，关闭标签页即释放，存储小体积资源（JS、CSS、小图片）
Disk Cache：硬盘缓存，读取速度稍慢，持久存储，关闭浏览器不消失，存储大体积资源（图片、音视频）

四、跨域相关（HTTP协议衍生）

1. 什么是跨域？为什么会出现跨域？

浏览器的同源策略 限制，协议、域名、端口三者必须完全一致，否则就是跨域，浏览器会阻止跨域请求读写资源（保护用户数据安全，防止恶意网站窃取Cookie、伪造请求）。

注意：跨域是浏览器的限制，服务器端可以正常接收和响应请求，只是浏览器拦截了响应数据。

2. 前端常见跨域解决方案

• CORS（跨域资源共享，主流方案）：后端配置响应头，允许指定域名跨域，支持所有请求方法，简单请求直接通过，复杂请求先发起预检OPTIONS请求
• 代理服务器 ：前端开发用webpack-dev-server proxy，生产环境用nginx反向代理，绕过浏览器同源限制
• JSONP：利用script标签不受跨域限制，仅支持GET请求，兼容性好，安全性低，已逐渐淘汰
• postMessage：页面嵌套场景，不同窗口之间通信
• nginx反向代理：生产环境常用，配置简单，性能好