✊不积跬步，无以至千里；不积小流，无以成江海。

请求是什么、响应是什么

在网络通信中，请求（Request）和响应（Response）是两个基本概念，用于描述客户端和服务器之间的交互过程。

请求（Request）是客户端向服务器发送的一种信息，用于请求特定的操作或资源。请求通常包含以下内容：

请求方法（Request Method）：指示客户端要执行的操作类型，常见的请求方法有 GET、POST、PUT、DELETE 等。
URL（Uniform Resource Locator）：用于指定请求的目标资源的地址。
头部（Headers）：包含附加的请求信息，如用户代理、内容类型、身份验证等。
主体（Body）：在某些请求中，可以包含请求所需的数据或参数。

响应（Response）是服务器对客户端请求的回应，包含了所请求资源的结果或执行操作的状态信息。响应通常包含以下内容：

状态码（Status Code）：指示服务器对请求的处理状态，常见的状态码有 200（成功）、404（未找到）、500（服务器内部错误）等。
头部（Headers）：包含附加的响应信息，如内容类型、缓存控制、跨域策略等。
主体（Body）：包含所请求资源的实际数据或操作的结果。

通过请求和响应的交互，客户端可以向服务器请求获取数据、提交表单、执行操作等，服务器则根据请求的内容进行相应的处理，并返回相应的结果给客户端。

这种请求和响应的模式是 Web 应用程序和服务之间进行通信的基础，它使得客户端能够与服务器进行交互并获取所需的数据或执行特定的操作。

wireshark抓包演示

Wireshark 是一款强大的网络协议分析工具，用于捕获和分析网络数据包。

以下是一个简单的步骤指南，演示如何使用 Wireshark 进行抓包：

下载和安装 Wireshark：前往 Wireshark 官方网站[www.wireshark.org/] ，下载Wireshark 安装包，并按照安装向导进行安装。
打开 Wireshark：安装完成后，打开 Wireshark 应用程序。
选择网络接口：在 Wireshark 界面的主窗口中，选择要捕获数据包的网络接口。可以选择本地网络接口，如 Wi-Fi 或以太网接口。
开始抓包：点击"Start"按钮开始抓包过程。Wireshark 将开始监视所选网络接口上的数据包流量。
进行相关操作：在 Wireshark 中可以进行各种操作，如过滤数据包、分析协议、查看数据包详细信息等。
停止抓包：当想要停止抓包时，点击 Wireshark 界面上的"Stop"按钮。
分析捕获的数据包：在捕获停止后，Wireshark 将显示捕获到的数据包列表。您可以选择特定的数据包，查看其详细信息、协议分析和其他相关信息。

请注意，使用 Wireshark 进行网络抓包可能涉及到网络安全和隐私问题，请确保在合法的网络环境下使用，并遵守适用法律和规定。

上述步骤只是一个简单的指南，Wireshark 提供了广泛的功能和设置选项，以满足不同的网络分析需求。

Cookie与Session

Cookie和Session都是用于在Web应用程序中管理用户状态和跟踪用户会话的机制。它们有不同的工作原理和用途。

Cookie是一种在客户端（通常是Web浏览器）存储少量数据的机制。当服务器向客户端发送响应时，可以在响应的头部中包含一个Set-Cookie字段，用于将Cookie发送给客户端。客户端接收到Cookie后，会将其存储在浏览器中，以便在后续的请求中发送给服务器。

Cookie的主要特点包括：

存储在客户端：Cookie是存储在客户端（浏览器）中的文本文件。
有域和路径限制：Cookie可以设置域和路径限制，只有在相同域和路径下的请求才会携带相应的Cookie。
大小限制：每个域名下的Cookie数量和总大小都有限制。
可设置过期时间：Cookie可以设置过期时间，在过期之前会一直存在于客户端。如果没有设置过期时间，Cookie将成为会话Cookie，只在当前会话中有效，关闭浏览器后会被删除。
明文传输：Cookie中的数据在传输过程中是明文的，容易被窃取或篡改。

Session

Session是在服务器端存储用户状态和会话数据的机制。当用户访问网站时，服务器会为每个会话创建一个唯一的会话标识符（Session ID），并将该会话ID存储在Cookie中发送给客户端。客户端在后续的请求中将会话ID作为Cookie发送给服务器，服务器通过会话ID来识别并恢复用户的会话状态。

Session的主要特点包括：

存储在服务器：Session数据存储在服务器的内存、数据库或其他持久化存储中，而不是客户端。
无域和路径限制：Session数据不受域和路径的限制，可以在整个应用程序范围内访问。
无大小限制：Session数据的大小没有限制，但过多的Session数据可能会占用服务器资源。
可设置过期时间：可以设置Session的过期时间，超过过期时间后，服务器会清除相应的Session数据。
更安全：由于Session数据存储在服务器端，相对于Cookie，Session更安全，因为客户端无法直接篡改或访问Session数据。

示例

当涉及到 Cookie 和 Session 的代码示例时，以下是使用 JavaScript 实现的示例，用于在浏览器中设置和获取 Cookie，以及在服务器端使用 Session。

设置和获取 Cookie（浏览器端）：

ini 复制代码

// 设置 Cookie
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

// 获取 Cookie
const cookies = document.cookie.split("; ");
const cookieMap = {};
cookies.forEach(cookie => {
  const [name, value] = cookie.split("=");
  cookieMap[name] = value;
});
const username = cookieMap.username;
console.log(username); // 输出：John Doe

在浏览器端，通过将一条字符串赋值给 document.cookie，我们可以设置一个名为 "username" 的 Cookie。在这个示例中，我们设置了一个名为 "username" 值为 "John Doe" 的 Cookie，并将其过期时间设置为 2023 年 12 月 31 日。

在获取 Cookie 的代码中，我们首先使用 document.cookie 获取所有的 Cookie 字符串。然后，我们使用 split("; ") 将字符串拆分成多个 Cookie。接下来，我们迭代每个 Cookie，并将其拆分成名称和值，存储在 cookieMap 对象中。最后，我们可以通过 cookieMap.username 获取名为 "username" 的 Cookie 的值，并将其打印到控制台。

使用 Session（服务器端）：

以下示例使用 Node.js 和 Express 框架，结合 express-session 中间件来处理 Session。

首先，确保已安装 express 和 express-session：

npm install express express-session

然后，创建一个名为 server.js 的文件，并添加以下代码：

ini 复制代码

const express = require('express');
const session = require('express-session');

const app = express();
app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: true,
}));

app.get('/', (req, res) => {
  // 设置 Session
  req.session.username = 'John Doe';
  res.send('Session set successfully.');
});

app.get('/profile', (req, res) => {
  // 获取 Session
  const username = req.session.username;
  res.send('Username: ' + username);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在服务器端，我们首先导入了 express 和 express-session 包，并创建了一个 Express 应用程序。

然后，我们使用 app.use(session({ ... })) 中间件来配置和启用 session。在这个示例中，我们传入了一个包含一些选项的对象，来配置 session 的行为。secret 选项用于设置 session 的加密密钥，resave 选项表示是否在每个请求上强制保存 session，saveUninitialized 选项表示是否保存未初始化的 session。

接下来，我们定义了两个路由：'/' 和 '/profile'。

在 '/' 路由处理程序中，我们设置了一个名为 "username" 的 session 变量，并将其值设置为 "John Doe"。这相当于在服务器端创建了一个 session，并将其与当前用户关联起来。

在 '/profile' 路由处理程序中，我们获取了之前设置的 session 变量的值，并将其发送到客户端作为响应。

最后，我们使用 app.listen(3000) 启动服务器，并监听来自 3000 端口的请求。

运行以上代码后，可以在浏览器中访问 http://localhost:3000 进行设置 Session，在 http://localhost:3000/profile 获取 Session，并在控制台中查看输出结果。

请注意，上述示例是简化的示例，用于说明 Cookie 和 Session 的基本用法。在实际应用中，可能需要更多的配置和安全考虑。

同源策略

JavaScript 中的同源策略（Same-Origin Policy）是一种安全机制，用于保护浏览器中的文档对象模型（DOM）免受跨站点攻击。同源策略要求在访问网页的脚本中，只有与该网页具有相同协议、主机名和端口号的脚本能够相互交互。

具体来说，同源策略限制了以下几个方面的访问：

DOM 访问限制：脚本只能访问与其所在页面具有相同源的 DOM 元素。这意味着脚本无法访问来自不同源的窗口或框架的 DOM。
数据访问限制：脚本只能访问与其所在页面具有相同源的数据。这包括读取和修改 Cookie、LocalStorage 和 SessionStorage 等。
AJAX 请求限制：脚本只能向与其所在页面具有相同源的服务器发送 AJAX 请求。跨域 AJAX 请求将被浏览器阻止。

同源策略的目的是防止恶意网站通过 JavaScript 代码获取用户的敏感信息或执行未经授权的操作。通过限制脚本与其他源之间的交互，可以减少安全漏洞的风险。

然而，同源策略也带来了一些限制，例如在开发跨域 AJAX 请求或与其他域共享资源时会受到限制。为了克服这些限制，可以使用跨域资源共享（CORS）等技术来实现跨域通信。

跨域之CORS

跨域资源共享（Cross-Origin Resource Sharing，CORS）是一种机制，允许浏览器在符合一定条件的情况下，跨域访问其他域的资源。在默认情况下，浏览器遵循同源策略，限制了来自不同源的跨域请求。

当网页中的 JavaScript 代码尝试从一个源（协议、域名和端口）向另一个源发送 AJAX 请求时，首先会发送一个预检请求（OPTIONS 请求）到目标服务器，以确定是否允许跨域请求。服务器可以通过设置相应的 CORS 头信息来决定是否接受跨域请求。

以下是一些常见的 CORS 头信息设置：

Access-Control-Allow-Origin ：指定允许访问该资源的域名。可以设置为 * 表示允许来自任意域的访问，或设置为具体的域名。
Access-Control-Allow-Methods：指定允许的请求方法，如 GET、POST、PUT 等。
Access-Control-Allow-Headers：指定允许的请求头，如 Content-Type、Authorization 等。
Access-Control-Allow-Credentials：指定是否允许发送身份凭证（如 Cookie、HTTP 认证等）。
Access-Control-Max-Age：指定预检请求的缓存时间，减少预检请求的次数。

在服务器端，需要设置适当的 CORS 头信息来允许跨域请求。例如，以下是使用 Node.js 和 Express 框架设置 CORS 的示例：

javascript 复制代码

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

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://example.com'); // 允许来自 example.com 的跨域请求
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Credentials', 'true'); // 允许发送身份凭证
  next();
});

app.get('/api/data', (req, res) => {
  // 处理跨域请求的逻辑
  res.send('Data response');
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上述示例中，我们通过 res.setHeader 方法设置了 CORS 头信息。其中，Access-Control-Allow-Origin 设置允许跨域请求的源，Access-Control-Allow-Methods 设置允许的请求方法，Access-Control-Allow-Headers 设置允许的请求头，Access-Control-Allow-Credentials 设置是否允许发送身份凭证。通过将这些头信息添加到响应中，服务器告知浏览器允许跨域请求。

需要注意的是，对于带有身份凭证的跨域请求，除了服务器设置 CORS 头信息外，还需要在发送请求时设置 withCredentials: true，以便携带身份凭证。

在浏览器端，当进行跨域请求时，浏览器会自动发送预检请求（OPTIONS 请求）检查服务器是否允许跨域访问。如果服务器返回的 CORS 头信息允许跨域请求，浏览器将发送实际的请求并返回数据。

使用 CORS，开发人员可以通过在服务器端设置适当的头信息来控制和允许跨域请求，从而实现跨域资源共享。

JSON是什么

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它以易于阅读和编写的文本格式表示结构化数据。JSON 最初由 Douglas Crockford 提出，并在 JavaScript 中得到广泛支持，但它已成为一种独立于编程语言的通用数据格式。

JSON 使用键值对的方式组织数据，其中键是字符串，值可以是字符串、数字、布尔值、对象、数组或 null。它具有以下特点：

简洁性：JSON 使用简洁的文本格式，易于理解和编写。
可读性：JSON 数据格式在文本形式上具有良好的可读性，对人类友好。
易于解析：JSON 数据可以轻松地被解析和生成，因为它与大多数编程语言的数据结构相匹配。
广泛支持：JSON 不仅在 JavaScript 中得到广泛支持，还被许多其他编程语言所支持和使用。

下面是一个简单的 JSON 示例：

json 复制代码

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "address": {
    "street": "123 Main St",
    "city": "New York"
  },
  "hobbies": ["reading", "cooking", "traveling"]
}

在这个示例中，我们有一个包含个人信息的 JSON 对象。它包括了姓名、年龄、是否为学生、地址和爱好等属性。其中，姓名和地址都是字符串，年龄是一个数字，是否为学生是一个布尔值，地址是一个嵌套的对象，爱好是一个数组。

在大多数编程语言中，可以使用内置的 JSON 解析器和序列化器来将 JSON 数据转换为具体的数据结构（如对象或字典），以便进行读取和操作。同样地，也可以将数据结构转换为 JSON 字符串，以便进行传输或存储。

由于 JSON 的简洁性和易于解析的特点，它被广泛用于 Web 应用程序中的数据交换、API 的数据传输以及配置文件的存储等场景。

跨域之JSONP

JSONP（JSON with Padding）是一种解决跨域访问的技术，允许在浏览器中从不同的域名请求数据。它是通过动态创建 <script> 标签来实现的。

由于浏览器的同源策略限制了从不同的域名请求资源，通常情况下，JavaScript 无法直接通过 AJAX 请求跨域获取数据。但是，通过利用 <script> 标签的跨域特性，可以绕过同源策略，并获取跨域资源。

JSONP 的原理是，服务器返回的数据被包装在一个回调函数中，然后通过动态创建 <script> 标签引入服务器端脚本。服务器根据 URL 中的回调函数名称，将数据作为参数传递给客户端的回调函数，从而实现数据的传递。

下面是一个简单的 JSONP 示例：

ini 复制代码

function handleResponse(data) {
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

在上述示例中，我们定义了一个名为 handleResponse 的回调函数，它将在获取数据后被调用。通过创建一个 <script> 标签，指定了跨域资源的 URL，并在 URL 中传递了回调函数的名称（callback=handleResponse）。然后，将该 <script> 标签添加到页面的 <body> 元素中。

服务器端在收到请求后，将数据包装在回调函数中返回，例如

erlang 复制代码

handleResponse({ "name": "John Doe", "age": 30 });

当浏览器加载 <script> 标签时，服务器返回的数据将被作为 JavaScript 代码执行，并调用指定的回调函数，从而将数据传递给客户端。

需要注意的是，JSONP 的安全性较低，因为它依赖于客户端信任服务器返回的脚本代码。如果服务器返回的脚本存在安全漏洞或恶意代码，客户端的安全性可能会受到威胁。因此，在使用 JSONP 时，需要确保从可信任的源获取数据，并对返回的数据进行适当的验证和处理。

JSONP 在早期的 Web 开发中被广泛使用，但由于安全性和其他局限性，现在更常见的做法是使用跨域资源共享（CORS）或代理服务器来处理跨域请求。

跨域之反向代理

跨域反向代理（Cross-Origin Reverse Proxy）是一种常用的跨域访问解决方案之一。它通过在服务器端设置代理服务器来代理浏览器与目标服务器之间的请求和响应，以实现跨域访问。

通常情况下，浏览器的同源策略限制了从不同域名的服务器获取资源。但是，通过使用反向代理，可以将跨域请求发送到代理服务器，然后代理服务器再将请求转发给目标服务器，并将目标服务器的响应返回给浏览器。由于浏览器与代理服务器之间的请求是同源的，所以可以绕过浏览器的同源策略限制。

下面是一个简单的跨域反向代理示例：

假设我们的应用程序运行在 http://localhost:3000 上，而要访问的跨域资源位于 http://api.example.com。
在服务器端，我们设置一个代理服务器，例如 http://localhost:8000。
在代理服务器上，我们配置路由规则，使得所有从 http://localhost:3000/api 开头的请求都被转发到 http://api.example.com。
当浏览器发送一个请求到 http://localhost:3000/api/data 时，请求将被代理服务器接收。
代理服务器将该请求转发到 http://api.example.com/data。
目标服务器 http://api.example.com 处理请求并返回响应。
代理服务器将目标服务器的响应返回给浏览器，绕过了同源策略限制。

通过跨域反向代理，我们可以在浏览器中直接访问代理服务器上的资源，而无需直接与目标服务器进行跨域请求。这种方法可以解决一些跨域访问的问题，同时也提供了更多的灵活性和安全性。

需要注意的是，配置和设置反向代理服务器需要服务器端的操作和权限，因此这种解决方案可能不适用于所有的场景。此外，反向代理服务器的性能和可扩展性也需要考虑，以确保能够处理大量的并发请求。

常见的反向代理服务器包括 Nginx、Apache HTTP Server、HAProxy 等，它们提供了丰富的配置选项和功能，可用于实现跨域反向代理。具体的配置方法和步骤会依赖于所选用的代理服务器。

Javascript高级-请求、响应、Cookie、跨域

请求是什么、响应是什么

wireshark抓包演示

Cookie与Session

Cookie

Session

示例

同源策略

跨域之CORS

JSON是什么

跨域之JSONP

跨域之反向代理