前端重学之HTTP

HTTP

1.协议---计算机世界的语言

协议是定义了 ** 数据 **  在 **计算机内和之间**进行**交换**的**规则**的**系统**。  
设备之间通信要求设备接受正在交换的数据的格式。**定义格式的一组规则称之为协议**。  

2.HTTP协议 它是 Web 上进行任何数据交换的基础 是一种 客户端—服务器（client-server）协议

1. websocket 虽然不是http协议 但是他的链接建立需要先用http协议握手
WebSocket 连接的建立始于一个 HTTP 请求。客户端发送一个特殊的 HTTP 请求到服务器，该请求包含了一个 Upgrade 头信息，表明希望将当前连接升级为 WebSocket 协议。如果服务器同意，它会返回一个 HTTP 101 Switching Protocols 响应，表示协议切换成功，之后双方就可以通过 WebSocket 进行通信了。  

2. Server Push 也是基于http协议的
   1. Server-Sent Events (SSE) 是一种允许服务器向浏览器推送实时更新的技术。它提供了一种简单的方法来建立从服务器到客户端的单向通信通道。
3. http是无状态的,通过cookie实现了会话
   1. 尽管 HTTP 根本上来说是无状态的，但借助 HTTP Cookie 就可使用有状态的会话。利用标头的扩展性，HTTP Cookie 被加进了协议工作流程，每个请求之间就能够创建会话，让每个请求都能共享相同的上下文信息或相同的状态。
   2. JWT默认是无状态的,**因为服务端默认不保存token,每次解析token获取用户身份**
    你可以选择让服务器端也保存一份令牌或与之关联的数据，从而创建一种“有状态”的行为。例如，服务器可以维护一个黑名单或白名单来跟踪已签发但已被撤销的令牌。此外，某些情况下，服务器可能会缓存用户的偏好设置或其他会话相关的数据，以便快速响应请求。

3.抓取HTTP包

![](https://img2024.cnblogs.com/blog/2232092/202412/2232092-20241220101937128-1157019102.png)
![](https://img2024.cnblogs.com/blog/2232092/202412/2232092-20241220102900302-1564889250.png)

4.axios发起请求 express生成响应

```js
const axios = require('axios');

// 示例URL
const url = 'https://jsonplaceholder.typicode.com/posts/1';

// 设置请求头
const headers = {
'Accept': 'application/json',
'Accept-Charset': 'utf-8',
'Accept-Encoding': 'gzip, deflate',
'Accept-Language': 'en-US,en;q=0.9,zh-CN;q=0.8',
'Authorization': 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==', // 示例Base64编码的用户名和密码
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
'Content-Length': '', // 在实际请求中由浏览器自动计算
'Content-Type': 'application/json',
'Cookie': 'sessionId=38afes7a8; csrftoken=a8dfc6be79jvhdsuyugdfeuh',
'Date': new Date().toUTCString(), // 当前时间戳
'Expect': '',
'From': 'user@example.com',
'Host': 'jsonplaceholder.typicode.com',
'If-Match': '"737060cd8c284d8af7ad3082f209582d"',
'If-Modified-Since': 'Sat, 29 Oct 1994 19:43:31 GMT',
'If-None-Match': '"737060cd8c284d8af7ad3082f209582d"',
'If-Unmodified-Since': 'Sat, 29 Oct 1994 19:43:31 GMT',
'Max-Forwards': '10',
'Origin': 'http://www.example-social-network.com',
'Pragma': 'no-cache',
'Proxy-Authorization': 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==',
'Range': 'bytes=200-1000',
'Referer': 'https://example.com/index.html',
'TE': 'trailers, deflate',
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
'Upgrade': 'websocket',
'Via': '1.0 proxy.example.com:8080',
'Warning': '199 Miscellaneous warning'
};

// 发送GET请求
axios.get(url, { headers })
.then(response => {
    console.log('Response Data:', response.data);
})
.catch(error => {
    console.error('Error:', error.message);
});
```

响应示例

```js
const express = require('express'); // 引入Express框架
const app = express(); // 创建一个Express应用实例
const port = 3000; // 定义服务器监听的端口号

// 定义一个GET路由，当客户端访问'/example'路径时触发
app.get('/example', (req, res) => {
// 设置Access-Control-Allow-Origin响应头，允许所有域名访问资源
res.setHeader('Access-Control-Allow-Origin', '*');

// 设置Access-Control-Allow-Methods响应头，允许GET、POST和PUT方法
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');

// 设置Access-Control-Allow-Headers响应头，允许Content-Type和Authorization请求头
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

// 设置Access-Control-Max-Age响应头，预检请求的结果缓存时间为86400秒（一天）
res.setHeader('Access-Control-Max-Age', '86400');

// 设置Cache-Control响应头，控制缓存行为，这里设置为公共缓存，最大缓存时间为一年
res.setHeader('Cache-Control', 'public, max-age=31536000');

// 设置Connection响应头，保持TCP连接打开以便后续请求复用
res.setHeader('Connection', 'keep-alive');

// 设置Content-Encoding响应头，内容编码类型为gzip
// 注意：实际应用中需要正确处理压缩
res.setHeader('Content-Encoding', 'gzip');

// 设置Content-Language响应头，文档的语言为英语（美国）
res.setHeader('Content-Language', 'en-US');

// 设置Content-Length响应头，实体主体的大小（以字节为单位）
// 在实际响应中由Express自动计算
res.setHeader('Content-Length', '');

// 设置Content-Type响应头，实体主体的数据媒体类型为application/json
res.setHeader('Content-Type', 'application/json');

// 设置Date响应头，消息创建的时间戳
res.setHeader('Date', new Date().toUTCString());

// 设置ETag响应头，资源的唯一标识符
res.setHeader('ETag', '"737060cd8c284d8af7ad3082f209582d"');

// 设置Expires响应头，资源过期的时间戳，这里设置为一年后过期
res.setHeader('Expires', new Date(Date.now() + 31536000000).toUTCString());

// 设置Last-Modified响应头，资源最后修改的时间戳
res.setHeader('Last-Modified', 'Wed, 21 Oct 2015 07:28:00 GMT');

// 设置Location响应头，新资源的位置
// 仅在重定向时使用
res.setHeader('Location', 'https://www.example.com/new-page');

// 设置Pragma响应头，包含实现特定的指令，主要用于向后兼容HTTP/1.0的Cache-Control响应头
res.setHeader('Pragma', 'no-cache');

// 设置Retry-After响应头，客户端应等待多久才能再次尝试请求
res.setHeader('Retry-After', '120'); // 两分钟后重试

// 设置Server响应头，服务器软件的信息
res.setHeader('Server', 'CustomServer/1.0');

// 设置Set-Cookie响应头，在客户端存储会话状态或其他信息
res.setHeader('Set-Cookie', 'sessionId=38afes7a8; Path=/; HttpOnly');

// 设置Transfer-Encoding响应头，分块传输编码方式
// 实际应用中需要正确处理分块传输
res.setHeader('Transfer-Encoding', 'chunked');

// 设置Vary响应头，告知代理服务器哪些请求头影响响应内容
res.setHeader('Vary', 'Accept-Language');

// 设置Via响应头，标识中间使用的代理服务器
res.setHeader('Via', '1.0 proxy.example.com:8080');

// 设置Warning响应头，关于消息的警告信息
res.setHeader('Warning', '199 Miscellaneous warning');

// 发送JSON格式的响应数据
const responseData = {
    message: 'Hello, World!',
    id: 1,
    title: 'Example Post'
};

res.send(responseData); // 发送响应数据
});

// 启动服务器，监听指定端口
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`); // 输出启动信息
});