【前端】在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

1. 创建 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.' });
   }
   

2. 初始化中间件

   在 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 路由。

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

1. 创建速率限制中间件

   在项目的 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 路由

1. 创建 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.' });
     });
   }
   

步骤 4: 测试

现在你可以测试 API 路由，看看是否实现了跨域请求的速率限制。

总结

通过上述步骤，你可以在 Next.js 中使用 cors 和 express-rate-limit 库来限制跨域请求的速度。这种组合方式可以让你在处理跨域请求的同时，防止恶意用户频繁请求导致的服务滥用。

需要注意的是，express-rate-limit 是一个通用的中间件，并不限于处理 CORS 请求。这意味着它可以应用于任何需要速率限制的场景。