第6章 - HTTP 与 HTTPS

嗨，朋友！

你每天都在使用浏览器上网，但你知道浏览器和服务器是怎么通信的吗？答案就是：HTTP 协议！

而 HTTPS 就是 HTTP 的加强版，多了一个“锁”，保护你的数据安全。这一章，我会用最通俗的语言，带你彻底搞懂这两个协议！

🤔 什么是 HTTP？

生活中的类比 📬

想象你在餐厅点餐：

你：“服务员，来一份牛肉面！”       ← 请求（Request）
服务员：“好的，请稍等。”
（厨房制作...）
服务员：“你的牛肉面来了！”        ← 响应（Response）

HTTP 就是这样的一问一答模式：

浏览器：“给我 www.baidu.com 的首页！”
服务器：“好的，这是首页的 HTML。”

定义

HTTP（HyperText Transfer Protocol，超文本传输协议）是用于从 Web 服务器传输超文本到本地浏览器的传输协议。

HTTP 的特点

2. 简单快速 ⚡

请求格式简单：
GET /index.html HTTP/1.1
Host: www.example.com

响应格式简单：
HTTP/1.1 200 OK
Content-Type: text/html

<html>...</html>

3. 基于 TCP 🔗

HTTP 工作在 TCP 之上：
应用层: HTTP
传输层: TCP
网络层: IP

📝 HTTP 请求和响应

HTTP 请求（Request）

请求结构

GET /api/users HTTP/1.1              ← 请求行（方法 路径 版本）
Host: api.example.com                ← 请求头部（Headers）
User-Agent: Mozilla/5.0
Accept: application/json
Cookie: session=abc123
                                     ← 空行（分隔符）
{"page": 1}                           ← 请求体（Body，可选）

HTTP 请求方法

方法	作用	是否有Body	广泛应用
GET	获取资源	✗	查询数据、加载页面
POST	创建资源	✓	提交表单、上传数据
PUT	更新资源	✓	修改整个资源
DELETE	删除资源	✗	删除数据
PATCH	部分更新	✓	修改部分属性
HEAD	获取头部	✗	检查资源是否存在
OPTIONS	查询支持的方法	✗	CORS 预检请求

常用请求头

Host: www.example.com               # 目标主机
User-Agent: Mozilla/5.0             # 浏览器信息
Accept: text/html,application/json  # 接受的数据类型
Accept-Language: zh-CN,en           # 接受的语言
Accept-Encoding: gzip, deflate      # 接受的编码
Cookie: session=abc123              # Cookie 信息
Content-Type: application/json      # 请求体类型
Content-Length: 348                 # 请求体长度
Authorization: Bearer token123      # 身份验证
Referer: https://www.google.com     # 来源页面

HTTP 响应（Response）

响应结构

HTTP/1.1 200 OK                      ← 状态行（版本 状态码 原因）
Content-Type: application/json       ← 响应头部
Content-Length: 1234
Set-Cookie: session=xyz789
Cache-Control: max-age=3600
                                     ← 空行
{"name": "Alice", "age": 25}        ← 响应体

HTTP 状态码

1xx - 信息提示

100 Continue           # 继续发送请求
101 Switching Protocols # 切换协议（如 WebSocket）

2xx - 成功

200 OK                 # 请求成功
201 Created            # 创建成功
204 No Content         # 成功但无返回内容

3xx - 重定向

301 Moved Permanently  # 永久重定向
302 Found              # 临时重定向
304 Not Modified       # 资源未修改（缓存有效）

4xx - 客户端错误

400 Bad Request        # 请求错误
401 Unauthorized       # 未授权
403 Forbidden          # 禁止访问
404 Not Found          # 资源不存在
405 Method Not Allowed # 方法不允许

5xx - 服务器错误

500 Internal Server Error  # 服务器内部错误
502 Bad Gateway            # 网关错误
503 Service Unavailable    # 服务不可用
504 Gateway Timeout        # 网关超时

常用响应头

Content-Type: text/html; charset=utf-8  # 内容类型
Content-Length: 1234                    # 内容长度
Set-Cookie: session=xyz789; HttpOnly    # 设置 Cookie
Cache-Control: no-cache                 # 缓存控制
Expires: Wed, 21 Oct 2025 07:28:00 GMT  # 过期时间
Location: https://www.example.com       # 重定向地址
Server: nginx/1.20.1                    # 服务器信息
Access-Control-Allow-Origin: *          # CORS 配置

🔒 HTTPS - 加强版的 HTTP

什么是 HTTPS？

HTTPS = HTTP + SSL/TLS

普通通信 (HTTP)：
你：“我的密码是 123456”       ← 明文传输
黑客：“哈哈，我看到了！”     ← 被窥听

加密通信 (HTTPS)：
你：“我的密码是 XyZ#@!€...”    ← 加密后的密文
黑客：“这是什么？看不懂！”     ← 无法破解

定义

HTTPS（HTTP Secure）是经由 SSL/TLS 加密的 HTTP 协议，保证数据传输的安全性。

HTTP vs HTTPS

特性	HTTP	HTTPS
端口	80	443
安全性	明文传输	加密传输
证书	不需要	需要 SSL 证书
浏览器显示	不安全	🔒 安全锁
SEO 权重	低	高
性能	快	稍慢（加密解密）

HTTPS 的作用

1. 数据加密 🔐

明文: password=123456
加密: 8f4a3d9e7b1c2a5f...

黑客窃取到的也是加密数据，无法解密

2. 身份验证 ✅

证书证明：
- 这个网站确实是 www.taobao.com
- 不是钓鱼网站

3. 数据完整性 🛑️

确保数据传输过程中没有被篡改

🔑 HTTPS 的工作原理

SSL/TLS 握手过程

客户端                              服务器
   │                                  │
   │────① 客户端 Hello──────────→│
   │  (支持的加密算法、随机数)   │
   │                                  │
   │←────② 服务器Hello + 证书────│
   │  (选择加密算法、公钥证书)   │
   │                                  │
   │────③ 验证证书 + 生成密钥────→│
   │  (用公钥加密对称密钥)      │
   │                                  │
   │←────④ 确认完成────────────│
   │                                  │
   │────⑤ 开始加密通信──────────→│
   │  (使用对称密钥加密)        │

非对称加密 + 对称加密

非对称加密 (RSA)：
- 公钥加密，私钥解密
- 用于传输对称密钥
- 速度慢

对称加密 (AES)：
- 同一个密钥加密和解密
- 用于传输实际数据
- 速度快

结合使用：
1. 用非对称加密传输对称密钥
2. 用对称密钥加密实际数据

💻 实际应用案例

前端开发

发送 GET 请求

// 使用 Fetch API
fetch('https://api.example.com/users')
  .then(response => {
    console.log('状态码:', response.status);      // 200
    console.log('状态文本:', response.statusText); // OK
    return response.json();
  })
  .then(data => {
    console.log('用户数据:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

// 使用 axios
import axios from 'axios';

axios.get('https://api.example.com/users')
  .then(response => {
    console.log('数据:', response.data);
    console.log('状态码:', response.status);
    console.log('响应头:', response.headers);
  })
  .catch(error => {
    console.error('错误:', error);
  });

发送 POST 请求

// 提交表单数据
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  body: JSON.stringify({
    name: '张三',
    age: 25
  })
})
  .then(response => response.json())
  .then(data => {
    console.log('创建成功:', data);
  });

// 使用 axios
axios.post('https://api.example.com/users', {
  name: '张三',
  age: 25
}, {
  headers: {
    'Authorization': 'Bearer token123'
  }
})
  .then(response => {
    console.log('响应:', response.data);
  });

处理 CORS 跨域

// 前端代码（使用 axios）
axios.get('https://api.example.com/data', {
  withCredentials: true  // 携带 Cookie
});

// 后端需要配置 CORS

后端开发

Node.js Express 服务器

const express = require('express');
const https = require('https');
const fs = require('fs');
const app = express();

// 中间件：解析 JSON
app.use(express.json());

// CORS 配置
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
  next();
});

// GET 请求
app.get('/api/users', (req, res) => {
  res.json({
    users: [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' }
    ]
  });
});

// POST 请求
app.post('/api/users', (req, res) => {
  const { name, age } = req.body;
  console.log(`接收到数据: 姓名=${name}, 年龄=${age}`);
  
  res.status(201).json({
    message: '创建成功',
    user: { id: 3, name, age }
  });
});

// HTTP 服务器
app.listen(3000, () => {
  console.log('HTTP 服务器运行在 http://localhost:3000');
});

// HTTPS 服务器
const httpsOptions = {
  key: fs.readFileSync('path/to/private-key.pem'),
  cert: fs.readFileSync('path/to/certificate.pem')
};

https.createServer(httpsOptions, app).listen(443, () => {
  console.log('HTTPS 服务器运行在 https://localhost:443');
});

Python Flask 服务器

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 启用 CORS

@app.route('/api/users', methods=['GET'])
def get_users():
    return jsonify({
        'users': [
            {'id': 1, 'name': '张三'},
            {'id': 2, 'name': '李四'}
        ]
    })

@app.route('/api/users', methods=['POST'])
def create_user():
    data = request.get_json()
    name = data.get('name')
    age = data.get('age')
    
    return jsonify({
        'message': '创建成功',
        'user': {'id': 3, 'name': name, 'age': age}
    }), 201

# HTTP
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

# HTTPS
# if __name__ == '__main__':
#     app.run(host='0.0.0.0', port=5000, 
#             ssl_context=('cert.pem', 'key.pem'))

运维配置

Nginx 配置 HTTPS

server {
    listen 80;
    server_name example.com;
    
    # HTTP 重定向到 HTTPS
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name example.com;
    
    # SSL 证书配置
    ssl_certificate /path/to/certificate.crt;
    ssl_certificate_key /path/to/private-key.key;
    
    # SSL 协议
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;
    
    # 反向代理
    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # 静态文件
    location / {
        root /var/www/html;
        index index.html;
    }
}

测试工程师

使用 curl 测试

# GET 请求
curl -X GET https://api.example.com/users

# POST 请求
curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -d '{"name":"张三","age":25}'

# 显示响应头
curl -I https://www.baidu.com

# 跟随重定向
curl -L https://www.example.com

# 带身份验证
curl -X GET https://api.example.com/users \
  -H "Authorization: Bearer token123"

# 保存 Cookie
curl -c cookies.txt https://www.example.com

# 使用 Cookie
curl -b cookies.txt https://www.example.com

📋 常见问题

1. HTTP 和 HTTPS 可以同时使用吗？

可以！但建议：
- HTTP (80端口) 重定向到 HTTPS (443端口)
- 所有资源都用 HTTPS 加载（避免混合内容）

2. 如何获取 SSL 证书？

免费方案：
- Let's Encrypt：免费的 SSL 证书
- Cloudflare：免费 CDN + SSL

付费方案：
- 阿里云、腾讯云购买 SSL 证书

3. HTTPS 会很慢吗？

现代 HTTPS 已经很快了：
- HTTP/2 支持
- 硬件加速（AES-NI）
- TLS 1.3 握手更快

性能影响可以忽略不计

4. 什么是混合内容？

HTTPS 页面中加载 HTTP 资源：

❌ 错误示例：
<img src="http://example.com/image.jpg">

✅ 正确示例：
<img src="https://example.com/image.jpg">
或
<img src="//example.com/image.jpg">  (自动适配协议)

💡 长安的学习建议

记住常用状态码 - 200、301、404、500 是最常见的
理解 GET 和 POST 的区别 - GET 查询，POST 修改
使用 HTTPS - 现在几乎所有网站都应该用 HTTPS
学会抽包分析 - 使用 Chrome DevTools 查看网络请求
注意跨域问题 - 前后端分离开发中很常见

✅ HTTP 协议：请求-响应模式、无状态、基于 TCP
✅ HTTP 请求：GET、POST、PUT、DELETE 等方法
✅ HTTP 响应：200、404、500 等状态码
✅ HTTPS 协议：HTTP + SSL/TLS 加密
✅ HTTPS 作用：数据加密、身份验证、保证完整性
✅ 实际应用：前端 Fetch/Axios、后端 Express/Flask、运维 Nginx

🎯 下一步

现在你已经理解了 HTTP 和 HTTPS，但是当你在浏览器输入 www.baidu.com，怎么知道百度的 IP 地址是多少呢？下一章我们就来学习 DNS 域名解析！

继续学习第7章：DNS 域名解析 →

💪 练习题

GET 和 POST 有什么区别？
常见的 HTTP 状态码有哪些？
HTTP 和 HTTPS 的区别是什么？
为什么现在的网站都要用 HTTPS？

答案提示

GET vs POST：
- GET：
  - 用于获取资源
  - 参数在 URL 中（可见）
  - 不安全（密码会暴露）
  - 可以缓存
  - 有长度限制
- POST：
  - 用于提交数据
  - 参数在请求体中（隐藏）
  - 相对安全
  - 不会被缓存
  - 无长度限制
常见状态码：
- 200 OK - 请求成功
- 301 Moved Permanently - 永久重定向
- 302 Found - 临时重定向
- 304 Not Modified - 使用缓存
- 400 Bad Request - 请求错误
- 401 Unauthorized - 需要身份验证
- 403 Forbidden - 禁止访问
- 404 Not Found - 资源不存在
- 500 Internal Server Error - 服务器错误
- 502 Bad Gateway - 网关错误
- 503 Service Unavailable - 服务不可用
HTTP vs HTTPS：
- HTTP：明文传输，不安全，端口80
- HTTPS：加密传输，安全，端口443
- HTTPS = HTTP + SSL/TLS
为什么用 HTTPS：
- 保护用户隐私（密码、个人信息）
- 防止数据被篡改
- 防止中间人攻击
- 提高 SEO 排名（搜索引擎优先显示 HTTPS 网站）
- 浏览器会标记 HTTP 为不安全
- 一些新 API（如地理位置、摄像头）只在 HTTPS 下可用