nodejs -- 中间件包 CORS

在 Node.js 中，cors 是一个非常流行的中间件包，用于解决 CORS（跨源资源共享）问题。它帮助你轻松地在服务器端处理跨域请求，允许来自不同源（例如不同域、端口或协议）的请求访问你的 API 或资源。

1. 安装 CORS 包

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

npm install cors

或者使用 yarn：

yarn add cors

2. 如何使用 CORS 中间件

一旦安装了 cors 包，你可以在 Express 应用中使用它。以下是如何在 Express 项目中使用 CORS 的基本步骤。

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

// 使用 CORS 中间件
app.use(cors());

// 示例路由
app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from the server!' });
});

// 监听端口
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

3. CORS 配置选项

cors 包不仅仅支持默认的跨域请求处理，还允许你进行更细粒度的配置，以根据需求调整跨域策略。cors 中间件的配置选项包括：
基本选项

• 1.origin：指定允许哪些源访问资源。可以是单个字符串（允许特定源），也可以是一个函数（根据请求动态决定）。
• 2.methods：指定允许的 HTTP 方法（例如：GET, POST, PUT, DELETE）。
• 3.allowedHeaders：指定允许的请求头。
• 4.exposedHeaders：指定响应中允许公开的头部。
• 5.credentials：是否允许客户端发送身份验证凭证（如 Cookies 或 HTTP 认证信息）。
• 6.maxAge：指定预检请求（OPTIONS 请求）缓存的最大时间（单位为秒）。
• 7.preflightContinue：是否在接收到预检请求时继续处理。

示例 1：允许所有源（默认行为）

app.use(cors());

这是最简单的使用方式，允许所有来源的请求访问你的资源。

示例 2：允许特定源访问

你可以配置 cors 中间件，仅允许某些特定的源访问你的 API：

app.use(cors({
  origin: 'http://example.com', // 允许 http://example.com 访问
}));

如果你希望允许多个源，可以传入一个数组：

app.use(cors({
  origin: ['http://example.com', 'http://anotherdomain.com'],
}));

示例 3：基于请求动态判断源

如果你希望基于每个请求动态决定允许的源，可以使用一个函数：

app.use(cors({
  origin: function (origin, callback) {
	if (['http://example.com', 'http://anotherdomain.com'].includes(origin)) {
	  callback(null, true); // 允许该源
	} else {
	  callback(new Error('Not allowed by CORS')); // 拒绝该源
	}
  }
}));

示例 4：允许特定的 HTTP 方法

你可以指定哪些 HTTP 方法是允许的：

app.use(cors({
  methods: ['GET', 'POST', 'PUT']
}));

示例 5：允许携带凭证

如果你希望支持带有认证信息（如 Cookies 或 HTTP 认证头）的请求，需要设置 credentials 选项为 true。需要注意的是，credentials 设置为 true 时，origin 不能设置为 '*'，必须是明确的来源。

app.use(cors({
  origin: 'http://example.com',
  credentials: true,
}));

示例 6：自定义请求头

你可以控制哪些请求头是允许的：

app.use(cors({
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Custom-Header']
}));

示例 7：允许暴露某些响应头

你可以控制哪些响应头暴露给浏览器：

app.use(cors({
  exposedHeaders: ['X-Custom-Header']
}));

4. 预检请求和缓存（OPTIONS 请求）

在某些跨域请求中，浏览器会发送一个预检请求（OPTIONS 请求），以确保服务器允许该跨域请求。你可以使用 maxAge 选项来指定浏览器缓存预检请求的时间，避免频繁的预检请求。

app.use(cors({
  maxAge: 3600 // 缓存预检请求的时间，单位为秒
}));

5. 启用 CORS 的具体场景

场景 1：前后端分离的开发模式
在开发过程中，通常前端和后端会分别运行在不同的端口上（例如：前端在 localhost:3000，后端在 localhost:5000）。这时，浏览器会把它们视为不同的来源，导致 CORS 错误。使用 CORS 中间件可以轻松解决这个问题，允许前端请求后端 API。
场景 2：跨域 API 请求
如果你提供了一个开放的 API 供第三方使用（例如，允许跨域访问的天气数据 API），你可以使用 CORS 中间件来指定允许哪些外部源（例如：第三方应用）访问你的 API。

6. 高级功能

cors 还可以与一些复杂的需求配合使用，例如：

• 基于特定请求头来决定 CORS 策略（例如：基于 Authorization 头来决定是否允许请求）
• 异步 CORS 策略：你可以异步处理 CORS 配置，基于数据库、外部服务等动态控制跨域权限。