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 配置,基于数据库、外部服务等动态控制跨域权限。