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);