【网络】HTTP 和 HTTPS

HTTP（HyperText Transfer Protocol）和 HTTPS（HTTP Secure）是互联网数据通信的核心协议，作为前端开发者，深入理解其原理和细节对性能优化、安全加固和问题排查至关重要。

一.HTTP核心概念

1.请求方法

GET : 获取数据。

一般用于获取静态资源或者调用查询类API,如搜索、分页列表等。

参数位置：通过 URL 的查询字符串（Query String）传递，参数之间使用"&"连接，如 ?id=1&name=foo。
可见性：参数明文暴露在 URL 和浏览器历史中。
长度限制：受浏览器和服务器限制（通常 2KB~8KB）。
幂等性：是（多次请求结果一致）。
安全性：是（不修改服务器数据）。

幂等指多次执行同一操作所产生的结果与执行一次的结果相同。

通俗理解：

电灯开关：按一次开关，灯亮；再按一次，灯灭。这不是幂等操作，因为结果会变化。

电梯的"关门"按钮：无论按多少次，最终结果都是门关闭。这是幂等操作。

由于字符串的可见性，所以要避免在URL中传递密码、token等敏感信息。

javascript 复制代码

// 使用 Fetch API 发送 GET 请求
fetch('https://api.example.com/data?id=1')
  .then(response => response.json());

POST : 提交数据

一般用于提交表单数据（登录、注册、文件上传），执行非幂等操作（创建新资源、触发支付）以及发送敏感信息（密码、支付信息）等。

参数位置：通过请求体（Body）传递，支持多种格式（JSON、FormData、二进制等）。
可见性：参数不可见（但仍需配合 HTTPS 保证安全）。
无长度限制：由服务器配置决定。
幂等性：否（多次提交会创建多个资源，如重复提交订单）。
安全性：否（可能修改服务器数据）。

javascript 复制代码

// 发送 JSON 格式的 POST 请求
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice', age: 30 })
});

PUT ：替换资源

一般用于替换整个资源。

参数位置：请求体（通常为完整资源数据）。
幂等性：是（多次替换同一资源，最终结果与一次替换相同）。
安全性：否（修改数据）。

javascript 复制代码

// 替换 ID 为 1 的用户数据
fetch('https://api.example.com/users/1', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Bob', age: 25 })
});

PUT 替换整个资源，PATCH 更新部分字段。

DELETE : 删除资源

一般用于删除指定资源（如用户、文章、订单）。

参数位置：通常通过 URL 路径指定资源 ID。
幂等性：是（删除不存在的资源仍返回相同结果）。
安全性：否（修改数据）。

javascript 复制代码

// 删除 ID 为 1 的用户
fetch('https://api.example.com/users/1', {
  method: 'DELETE'
});

HEAD : 获取响应头（用于检查资源是否存在或更新）。

一般用于检查资源是否存在（如验证链接有效性）或者获取资源元数据（如文件大小、最后修改时间）。

行为：与 GET 相同，但服务器不返回响应体。
幂等性：是。
安全性：是。

javascript 复制代码

// 检查资源是否存在
fetch('https://api.example.com/data/1', { method: 'HEAD' })
  .then(response => {
    if (response.ok) console.log('资源存在');
    else console.log('资源不存在');
  });

2.状态码

当客户端发出请求时，服务器会返回三位数字，这三位数字就是状态码，状态码有五种：信息性响应、成功响应、重定向响应、客户端错误、服务器错误。

状态码第一位数字表示类别，后两位细化具体原因：

**100：**客户端应继续发送请求体（用于大文件上传前确认服务器是否接受）

200：请求成功

201：资源创建成功

301：资源永久重定向，浏览器自动缓存跳转

302 ：临时重定向

400 ：请求参数错误

401 ：未登录或token失效

403 ：无权限访问（检查用户角色）

404 ：资源不存在

500 ：服务器错误（需连接后端）

3.请求头与响应头（高频使用）

|-----|-----------------------------|------------------------------|
| 类型 | 字段 | 前端关注点 |
| 请求头 | Content-Type | 声明请求体的格式（如 application/json） |
| 请求头 | Authorization | 携带 Token（如 Bearer xxx） |
| 请求头 | Cookie | 自动发送当前域下的 Cookie |
| 响应头 | Access-Control-Allow-Origin | 解决跨域问题（需配置为前端域名或 *） |
| 响应头 | Cache-Control | 控制缓存策略（如 max-age=3600） |
| 响应头 | Set-Cookie | 服务器设置 Cookie（注意安全属性） |

二.HTTPS 核心理解

1.为什么需要HTTPS？

HTTP 的缺陷：

明文传输：数据易被窃听（如密码、Cookie）。

无身份验证：可能遭遇中间人攻击（伪造服务器）。

数据篡改：传输内容可能被修改。

HTTPS 的优势：

加密：数据通过 TLS/SSL 加密，防止窃听。

身份认证：通过数字证书验证服务器身份。

完整性校验：防止数据被篡改。

2.HTTPS 实践

（1）本地开发

使用 webpack-dev-server 配置 HTTPS：

javascript 复制代码

// webpack.config.js
module.exports = {
  devServer: {
    https: true, // 自动生成自签名证书
    // 或指定证书
    // https: { key: fs.readFileSync('key.pem'), cert: fs.readFileSync('cert.pem') }
  }
};

（2）生产环境

确保所有资源（图片、脚本、样式）使用 HTTPS 协议，避免混合内容（Mixed Content）错误。

使用 Content-Security-Policy 头限制不安全请求。