【前端】在Next.js中cors 库的使用及限制跨域请求的速度

cors 库是一个用于方便地启用跨域资源共享（CORS）的 Node.js 中间件。在 Next.js 中，你可以利用这个库来处理来自不同源的请求。下面是详细的步骤说明，展示如何在 Next.js 中使用 cors 库。

安装 cors

首先，你需要安装 cors 包。可以通过 npm 或 yarn 安装：

npm install cors

或者

yarn add cors

配置 cors

接下来，你需要配置 cors 中间件来处理来自不同源的请求。在 Next.js 中，你可以将 cors 作为中间件添加到你的 API 路由中。

示例：创建 API 路由并使用 cors

创建 API 路由

在 pages/api 目录下创建一个新的文件，如 exampleApi.js，用于处理来自前端的请求：

import cors from 'cors';
import initMiddleware from '../../lib/initMiddleware';// 初始化 cors 中间件
const corsMiddleware = initMiddleware(cors({origin: (origin, callback) => {// 根据需要更改 origin 参数，以允许指定的域名或使用通配符允许所有域名callback(null, true);},credentials: true, // 是否允许 cookie 和 header 中的凭据optionsSuccessStatus: 200, // 有些浏览器（如 IE）要求 CORS 请求的成功状态码为 200})
);export default async function handler(req, res) {// 应用 cors 中间件await corsMiddleware(req, res);// 你的 API 逻辑res.status(200).json({ message: 'Hello from your API.' });
}

初始化中间件

在 lib 目录下创建一个名为 initMiddleware.js 的文件，用于初始化中间件：

// lib/initMiddleware.js
const initMiddleware = middleware =>async (req, res) => {return new Promise((resolve, reject) => {middleware(req, res, (result) => {if (result instanceof Error) {return reject(result);}return resolve(result);});});};export default initMiddleware;

使用 cors 中间件

现在你已经配置好了 cors 中间件，可以在 API 路由中使用它来处理来自不同源的请求。当前端应用程序向这个 API 路由发出请求时，cors 中间件将会自动处理跨域请求，并设置适当的响应头。

前端请求示例

假设你在前端应用程序中有一个按钮，点击后会向 /api/exampleApi 发起请求：

async function fetchData() {const response = await fetch('/api/exampleApi', {method: 'GET',headers: {'Content-Type': 'application/json',// 如果需要携带 cookie 或其他认证信息，请设置 'credentials' 为 'include''credentials': 'include'}});const data = await response.json();console.log(data);
}document.getElementById('fetchButton').addEventListener('click', fetchData);

配置 `cors` 选项

cors 库提供了多种选项来定制跨域行为。以下是一些常用的选项：

origin: 一个回调函数，用于验证请求是否来自允许的源。
methods: 允许的方法列表，默认为 'GET,HEAD,PUT,PATCH,POST,DELETE'。
preflightContinue: 默认为 false，表示预检请求将立即响应，而不是继续到后续的中间件。
optionsSuccessStatus: 预检请求的成功状态码，默认为 200。
maxAge: 预检请求的有效期（秒），默认为 86400。
credentials: 是否允许 cookie 和 header 中的凭据，默认为 false。
exposedHeaders: 响应中可以被访问的头部字段列表。
allowedHeaders: 允许的头部字段列表。

跨域限速

要使用 cors 库来限制跨域请求的速度，实际上 cors 库本身并不直接支持速率限制的功能。然而，你可以结合使用其他的中间件或库来实现速率限制。以下是如何结合使用 cors 和速率限制中间件来达到目的的一种方法。

步骤 1: 安装必要的库

首先，你需要安装 cors 和一个速率限制中间件，例如 express-rate-limit。这是因为 Next.js 的 API 路由本质上是基于 Express 的，所以我们可以使用 Express 的中间件。

npm install cors express-rate-limit

步骤 2: 创建速率限制中间件

接下来，我们将创建一个速率限制中间件，该中间件将应用于所有或特定的 API 路由。

示例：创建速率限制中间件

创建速率限制中间件

在项目的 lib 目录下创建一个名为 rateLimitMiddleware.js 的文件，用于定义速率限制逻辑：

// lib/rateLimitMiddleware.js
import rateLimit from 'express-rate-limit';// 创建一个速率限制器实例
const limiter = rateLimit({windowMs: 1 * 60 * 1000, // 时间窗口，例如 1 分钟max: 10, // 在时间窗口内允许的最大请求次数message: 'Too many requests from this IP, please try again in an hour.',
});export default limiter;

步骤 3: 配置 API 路由

接着，在你的 API 路由中同时使用 cors 和速率限制中间件。

示例：配置 API 路由

创建 API 路由

在 pages/api 目录下创建一个新的文件，如 exampleApi.js，用于处理来自前端的请求：

import cors from 'cors';
import initMiddleware from '../../lib/initMiddleware';
import rateLimitMiddleware from '../../lib/rateLimitMiddleware';// 初始化 cors 中间件
const corsMiddleware = initMiddleware(cors({origin: (origin, callback) => {// 根据需要更改 origin 参数，以允许指定的域名或使用通配符允许所有域名callback(null, true);},credentials: true, // 是否允许 cookie 和 header 中的凭据optionsSuccessStatus: 200, // 有些浏览器（如 IE）要求 CORS 请求的成功状态码为 200})
);export default async function handler(req, res) {// 应用速率限制中间件await rateLimitMiddleware(req, res, async () => {// 应用 cors 中间件await corsMiddleware(req, res);// 你的 API 逻辑res.status(200).json({ message: 'Hello from your API.' });});
}