首页 > 文章 > web前端 > 速率限制的基础知识：它是如何工作的以及如何使用它

速率限制的基础知识：它是如何工作的以及如何使用它

Barbara Streisand原创: 2024-11-04 06:27:01879浏览

速率限制是网络开发中的一个重要概念。确保服务器稳定性、资源高效分配、防范恶意攻击。因此，在本文中，我们将深入探讨速率限制的本质、重要性、各种实现方法以及实际示例来演示其功能。让我们开始吧？

什么是速率限制？

速率限制是一种用于控制 Web 服务或服务器的传入请求或流量的策略。它有助于保护您的应用程序免受滥用，确保公平的资源分配并保持服务稳定性。

为什么要使用速率限制？

以下是您应该使用速率限制的一些原因??

防止滥用：阻止机器人或恶意用户用请求淹没服务器。
资源管理：确保所有用户公平使用资源。
安全性：通过限制应用程序中某些端点的尝试来帮助防止暴力攻击。
成本控制：有助于防止因过多的 API 调用而产生意外费用。
性能：保持服务器响应并降低停机风险。

速率限制的类型

固定窗口（或简单）速率限制：此方法限制固定时间窗口内的请求。例如，“每分钟 100 个请求。”
滑动窗口速率限制：动态时间范围，用于跟踪和限制最近一段时间（例如最后几分钟或几秒钟）的请求。
令牌桶算法：该方法使用一个装满令牌的“桶”来管理请求。每个传入请求都会消耗一个令牌，并且桶会按照设定的时间间隔重新填充。这种方法允许流量突发，同时保持总体速率限制。
漏桶算法：与令牌桶类似，但有所不同。当桶满时，多余的请求会“泄漏”或被丢弃，从而保持稳定的流量。

？我什至不想撒谎，因为我对令牌桶和漏桶算法了解不多，因为我当前的项目不需要它们。但是，固定窗口和滑动窗口是您会遇到的最常见的类型。例如，OpenAI 的 GPT-4 使用带有分层限制的固定窗口速率限制 - 第一层允许每分钟 500 个请求。这种方法可能会导致流量激增，因为用户可能会在窗口重置之前达到限制。

速率限制的工作原理

该过程通常涉及：

跟踪：监控用户（主要是userId）或IP在特定时间范围内发出了多少个请求。
阈值：定义限制（例如每小时 100 个请求）。
响应：超出限制时发送警告或阻止进一步的请求（通常带有 429 Too Many Requests HTTP 状态代码）。

实施速率限制：实例

现在您已经对速率限制及其工作原理有了基本的了解，让我们在我们将要创建的项目中实际实现它。

我们将创建两个项目来演示速率限制：

GET 请求示例
POST 请求示例

技术堆栈

前端：React（使用Vite）
后端：Express（Node.js 框架）

GET 请求示例

使用您选择的任何名称创建一个文件夹，然后在 VS code 或您使用的任何代码编辑器上打开它。

在您创建的文件夹中，再创建两个文件夹，分别称为 frontend 和 backend。

之后，cd 进入后端文件夹并输入此命令 npm init -y 来初始化 package.json 文件

之后在后端文件夹中安装以下 npm 包??

npm install express cors express-rate-limit

npm install -D nodemon

它们的作用：

Express：创建您的 Web 服务器并处理 API 路由
cors：允许前端与后端安全通信
express-rate-limit：保护您的 API 免受过多请求
nodemon：在开发过程中自动重启服务器（这就是我们使用 D 的原因）

之后，创建一个index.js（您可以随意创建）文件，因为我们将使用它来设置速率限制器。

完成复制并粘贴此代码后，我将稍后解释

const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
  message: "Too many requests from this IP, please try again later.",
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get("/api/data", (req, res) => {
  res.send("Welcome to the API!");
});

app.listen(5000, () => {
  console.log("Server running on http://localhost:5000");
});

以下是每个部分的作用：

前两行导入我们需要的包
app = express() 创建我们的服务器
限制器配置为：
- windowMs：设置15分钟的时间窗口（15×60×1000毫秒）
- 最大：该窗口中每个 IP 地址允许 5 个请求
- message：用户超出限制时看到的错误消息

然后：

app.use(limiter) 将我们的速率限制应用于所有路由
我们在“/api/data”创建一个简单的测试路由，发送欢迎消息
最后，我们在端口 5000 上启动服务器

当用户在 15 分钟内从同一 IP 访问您的 API 超过 100 次时，他们将收到错误消息，而不是访问 API。

现在您知道它是如何工作的，我们希望通过添加到 package.json 来启用自动重启??

 {
  "scripts": {
    "dev": "nodemon index.js"
  }
}

这就是后端的全部内容。

是时候设置前端了。

打开一个新终端并 cd 进入 frontend 文件夹并运行 ??

npm install express cors express-rate-limit

npm install -D nodemon

按照以下说明进行操作，如果您不懂 TypeScript，我建议您选择 JavaScript
您可以通过删除一些不需要的文件来进行一些清理。这是我的样子

The Basics of Rate Limiting: How It Works and How to Use It

完成后，打开 App.jsx 并粘贴我将解释的这段代码？

const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
  message: "Too many requests from this IP, please try again later.",
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get("/api/data", (req, res) => {
  res.send("Welcome to the API!");
});

app.listen(5000, () => {
  console.log("Server running on http://localhost:5000");
});

这是发生的事情：

我们导入 useState 来管理数据，导入 axios 来发出 API 请求
我们创建两个状态变量：
- 响应：存储成功的 API 响应
- error：存储任何错误消息
fetchData 函数：
- 单击按钮时调用
- 尝试从我们的 API 获取数据
- 更新响应或错误状态
- 使用 try/catch 处理成功和错误
用户界面显示：
- 标题
- 触发请求的按钮
- API 响应（如果成功）
- 红色错误消息（如果请求失败）当您在 15 分钟内点击该按钮次数过多时，由于我们的后端限制，您将看到速率限制错误消息！

这就是 GET 请求示例的全部内容。让我们继续下一个例子

POST 请求示例

对于这个示例，您可以决定注释掉第一个示例的代码并粘贴此代码??

 {
  "scripts": {
    "dev": "nodemon index.js"
  }
}

您可以看到大部分代码与第一个示例相同，但这里只是一些关键区别??

添加了 bodyParser 来处理表单数据
创建处理表单提交的 POST 端点

也将此代码粘贴到前端

  npm create vite@latest .

在这里，我们只是通过表单向服务器发出请求。让我们看看这与 GET 示例有何不同：

使用表单而不是单个按钮
使用 formData 管理表单状态
使用handleInputChange处理输入更改
使用 POST 请求而不是 GET
以绿色显示成功消息

该表单允许在 15 分钟内提交 5 次 - 之后，用户会看到速率限制错误消息。

结论

好了，伙计们，恭喜你读完了这篇文章？我希望您现在了解速率限制的工作原理以及为什么应该在您的项目中使用它，特别是如果您正在从事涉及资金的大型项目。如果您有任何疑问，请随时在评论中提问。编码愉快？

以上是速率限制的基础知识：它是如何工作的以及如何使用它的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript typescript json npm express Resource if for while select try catch Error Token auto using finally copy JS function this input idea http ui gpt axios

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Preserve the Root Object Name When Destructuring Function Parameters in ES6?下一篇：How can I efficiently filter data based on multiple values in AngularJS?

查看更多