HTTP-从0开始-20260408

6 阅读3分钟

HTTP

一、HTTP 协议基础

1. HTTP 请求

问题:HTTP 请求

答案核心回答:HTTP 请求由请求行、请求头、请求体组成。

代码示例

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
Accept-Language: zh-CN,zh;q=0.9
Cookie: session_id=abc123

请求体(POST/PUT):
username=admin&password=123456

2. HTTP 方法

问题:HTTP 方法

答案核心回答:GET(获取)、POST(创建)、PUT(更新)、DELETE(删除)等。

方法幂等安全用途
GET获取资源
POST创建资源
PUT更新资源
DELETE删除资源
PATCH部分更新
HEAD获取头部
OPTIONS跨域预检

二、HTTP 状态码

3. HTTP 状态码

问题:HTTP 状态码

答案核心回答:1xx 信息、2xx 成功、3xx 重定向、4xx 客户端错误、5xx 服务器错误。

代码示例

// 1xx - 信息
100 Continue

// 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
422 Unprocessable Entity

// 5xx - 服务器错误
500 Internal Server Error
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout

三、HTTP 缓存

4. HTTP 缓存

问题:HTTP 缓存

答案核心回答:HTTP 缓存分为强缓存和协商缓存。

代码示例

// 强缓存 - 不发请求
// Cache-Control
Cache-Control: max-age=3600, public
// 或
// Expires
Expires: Wed, 21 Oct 2026 07:28:00 GMT

// 协商缓存 - 发请求确认
// Last-Modified / If-Modified-Since
Last-Modified: Wed, 21 Oct 2026 07:28:00 GMT
If-Modified-Since: Wed, 21 Oct 2026 07:28:00 GMT

// ETag / If-None-Match
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

// 响应头
Cache-Control: no-cache  // 每次都协商
Cache-Control: no-store   // 不缓存

四、跨域问题

5. 跨域解决方案

问题:跨域解决方案

答案核心回答:CORS、JSONP、代理服务器、postMessage 等。

代码示例

// 1. CORS(推荐)
// 服务器端设置
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://example.com');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Credentials', 'true');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

// 2. JSONP(仅 GET)
// 客户端
function jsonp(url, callback) {
    const script = document.createElement('script');
    window[callback] = (data) => {
        delete window[callback];
        document.body.removeChild(script);
    };
    script.src = `${url}?callback=${callback}`;
    document.body.appendChild(script);
}

// 3. 代理服务器
// nginx 配置
// location /api/ {
//     proxy_pass http://backend-server/;
// }

// 4. postMessage
window.postMessage('message', 'https://target-origin.com');

五、HTTPS 与 SSL

6. HTTPS

问题:HTTPS

答案核心回答:HTTPS = HTTP + TLS/SSL,提供加密传输和身份验证。

代码示例

// TLS 握手过程
// 1. Client Hello - 客户端支持的加密套件
// 2. Server Hello - 服务器选择加密套件
// 3. Certificate - 服务器发送证书
// 4. Key Exchange - 密钥交换
// 5. Finished - 握手完成,开始加密通信

// 对称加密 vs 非对称加密
// 非对称加密:公钥加密,私钥解密(密钥交换)
// 对称加密:AES、ChaCha20(数据传输)

// 数字证书验证
// 1. 浏览器内置根证书
// 2. 验证服务器证书链
// 3. 检查证书有效期
// 4. 检查域名匹配

六、WebSocket

7. WebSocket

问题:WebSocket

答案核心回答:WebSocket 是双向通信协议,建立在 TCP 之上。

代码示例

// 创建连接
const ws = new WebSocket('wss://example.com/ws');

// 连接打开
ws.onopen = () => {
    ws.send('Hello Server');
};

// 接收消息
ws.onmessage = (event) => {
    console.log('Received:', event.data);
};

// 错误处理
ws.onerror = (error) => {
    console.error('WebSocket Error:', error);
};

// 关闭连接
ws.onclose = () => {
    console.log('Connection closed');
};

// 手动关闭
ws.close();

// 心跳保活
setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify({ type: 'ping' }));
    }
}, 30000);