前端面试 HTTP：系统知识体系与实战指南

什么是 HTTP？为什么它对前端如此重要？

HTTP（HyperText Transfer Protocol，超文本传输协议）是互联网上应用最广泛的一种网络协议，用于在客户端与服务器之间传输超文本（如 HTML 页面、JSON 数据、图片、视频等）。它是前端工程师与后端服务通信的“桥梁”，所有前端请求（如 fetch()、XMLHttpRequest、axios 请求）最终都依赖 HTTP 协议完成数据交互。

在现代前端开发中，HTTP 不仅是“请求-响应”的通道，更是性能优化、安全防护、缓存策略、跨域控制、SEO 支持等关键技术的基石。例如：

• 页面首屏加载速度 → 依赖 HTTP 缓存、资源预加载、连接复用；
• 接口响应失败 → 可能由状态码异常、超时、CORS 限制、TLS 握手失败引起；
• SPA 路由与服务端渲染（SSR）→ 需要合理配置 HTTP 方法与重定向策略；
• CDN 加速与边缘计算 → 本质上是对 HTTP 请求链路的优化。

⚡ 提示：不懂 HTTP 的前端，就像不会开引擎的飞行员——看似能飞，实则危险。

HTTP 与 HTTPS 的本质区别

HTTPS = HTTP + TLS/SSL 加密层，核心目标是：

• 机密性：防止数据被窃听（对称加密）；
• 完整性：防止数据被篡改（MAC 签名）；
• 身份认证：验证服务器身份（CA 证书）。

浏览器会通过证书链校验服务器身份，若证书无效（过期、域名不匹配、自签名），会显示“不安全”警告。前端需注意：

• 避免在 HTTPS 页面加载 HTTP 资源（混合内容问题）；
• 使用 HSTS（HTTP Strict Transport Security）强制 HTTPS；
• 配置 TLS 1.2+，禁用弱加密套件（如 RC4、DES）。

常见状态码分类与前端应对策略

特别关注 304 Not Modified：当缓存有效时，服务器返回 304，浏览器使用本地缓存，大幅减少传输量。

// 示例：条件请求 + 304 响应
// 客户端请求（带缓存验证头）
GET /api/data HTTP/1.1
If-None-Match: "abc123"
If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
// 服务器响应（资源未变更）
HTTP/1.1 304 Not Modified
Date: Wed, 21 Oct 2015 07:28:01 GMT
Cache-Control: max-age=3600

强缓存 vs 协商缓存：一张表说清

Cache-Control 优先级高于 Expires，推荐使用 max-age 指定缓存时长（单位：秒）。

// 示例：HTML 页面禁用缓存
Cache-Control: no-store, no-cache, must-revalidate
// 示例：静态资源长期缓存
Cache-Control: public, max-age=31536000, immutable

CORS 跨域原理与前端配置

CORS（Cross-Origin Resource Sharing）是浏览器安全策略，防止恶意网站窃取数据。关键点：

• 浏览器自动发起预检请求（OPTIONS）；
• 服务端必须返回 Access-Control-Allow-Origin；
• 前端需设置 withCredentials: true 才能携带 Cookie；
• 简单请求（GET/POST + 安全头）无需预检，否则需预检。

前端常见错误：Access to fetch at 'https://api.example.com' from origin 'https://your-site.com' has been blocked by CORS policy

解决方案：

1. 后端配置 CORS 头（推荐）；
2. 开发环境用代理（如 Vite server.proxy）；
3. 生产环境用反向代理（Nginx）。

// 后端 Node.js 示例（Express）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://your-site.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  if (req.method === 'OPTIONS') return res.sendStatus(204);
  next();
});

HTTP/1.1 的瓶颈 vs HTTP/2 的突破

⚠️ 注意：HTTP/2 不支持 HTTP/1.1 的 chunked 传输编码，但支持 trailers。

⚡ 前端影响：启用 HTTP/2 后，不再需要“域名分片”（如 img1.example.com）来突破连接数限制，反而应减少域名数量以提升复用率。

四步握手详解（TLS 1.2）

TLS 1.3 优化：握手仅需 1-RTT（甚至 0-RTT），移除不安全算法，强制前向保密。

CDN 如何提升前端性能？

CDN（Content Delivery Network）通过全球分布式节点缓存静态资源，使用户从最近节点获取数据。

关键优化点：

• 就近访问：减少网络跳数，降低延迟（RTT）；
• 缓存优化：合理设置 Cache-Control；
• 边缘计算：支持边缘函数（如 Cloudflare Workers）；
• DDoS 防护：CDN 节点可过滤恶意流量。

前端配合策略：

1. 静态资源走 CDN（图片、JS、CSS、字体）；
2. 文件名加哈希（如 logo.e3f8a.png），实现“发布即更新”；
3. 使用 <link rel="preconnect"> 提前建立 CDN 连接；
4. 配置 DNS Prefetch：<link rel="dns-prefetch" href="//cdn.example.com">。

1. 什么是 HSTS？如何配置？

HSTS（HTTP Strict Transport Security）强制浏览器使用 HTTPS 访问网站，防止 downgrade 攻击（如 SSL Stripping）。

响应头示例：

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

参数说明：

• max-age：缓存时长（秒）；
• includeSubDomains：包含子域名；
• preload：加入 HSTS Preload List（需提交至 https://hstspreload.org）。

2. HTTP/3 与 QUIC 是什么？

HTTP/3 基于 QUIC（Quick UDP Internet Connections）协议，核心特点：

• 基于 UDP，避免 TCP 三次握手 + 队头阻塞；
• 内置 TLS 1.3，握手更快；
• 支持连接迁移（如 Wi-Fi → 4G 时保持连接）；
• 流量控制、拥塞控制内置于协议。

现状：Chrome/Firefox 已支持，但需服务端（如 Nginx + QUIC 插件）配置。

3. 前端如何监控 HTTP 错误？

监控方案：

• 错误日志：捕获 fetch 错误，上报服务端；
• Performance API：performance.getEntriesByType('resource') 分析资源加载；
• 错误采集 SDK：如 Sentry、Fundebug；
• 浏览器原生：window.onerror + unhandledrejection 事件。

// 示例：监控 fetch 错误
window.addEventListener('unhandledrejection', (e) => {
  if (e.reason instanceof Error && e.reason.name === 'TypeError') {
    console.error('Fetch failed:', e.reason.message);
    // 上报到监控系统
  }
});