如何使用 cors 中间件处理跨域资源共享 (CORS)？

推荐答案

// www.javascriptcn.com code example
const express = require('express');
const cors = require('cors');

const app = express();

// 使用默认配置的 CORS 中间件
app.use(cors());

// 或者自定义 CORS 配置
app.use(cors({
  origin: 'https://example.com', // 允许的源
  methods: ['GET', 'POST', 'PUT', 'DELETE'], // 允许的 HTTP 方法
  allowedHeaders: ['Content-Type', 'Authorization'], // 允许的请求头
  credentials: true // 允许发送凭据（如 cookies）
}));

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

本题详细解读

什么是 CORS？

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种机制，允许浏览器向不同源的服务器发起请求。默认情况下，浏览器会阻止跨域请求，以防止恶意网站访问用户数据。CORS 通过在 HTTP 头中添加特定的字段来告诉浏览器，哪些跨域请求是被允许的。

如何使用 cors 中间件？

1. 安装 cors 中间件： 在项目中使用 cors 中间件之前，需要先安装它：

   npm install cors

2. 引入并使用 cors 中间件： 在 Express 应用中引入 cors 中间件，并调用 app.use(cors()) 来启用 CORS 支持。默认情况下，cors 中间件会允许所有跨域请求。

3. 自定义 CORS 配置： 如果需要更细粒度的控制，可以传递一个配置对象给 cors() 函数。例如：

   • origin：指定允许访问的源，可以是字符串、数组或函数。
   • methods：指定允许的 HTTP 方法。
   • allowedHeaders：指定允许的请求头。
   • credentials：指定是否允许发送凭据（如 cookies）。

示例代码解析

• 默认配置：app.use(cors()) 允许所有跨域请求。
• 自定义配置：app.use(cors({ origin: 'https://example.com', methods: ['GET', 'POST', 'PUT', 'DELETE'], allowedHeaders: ['Content-Type', 'Authorization'], credentials: true })) 只允许来自 https://example.com 的请求，并且只允许 GET、POST、PUT、DELETE 方法，允许的请求头为 Content-Type 和 Authorization，并且允许发送凭据。

注意事项

• 安全性：在生产环境中，应谨慎配置 origin，避免使用通配符 *，以防止恶意网站利用 CORS 进行攻击。
• 性能：CORS 中间件会增加请求的处理时间，因此在不需要跨域请求的情况下，可以考虑禁用 CORS。