如何在TypeScript服务器中设置CORS跨域请求？

5天前 • 服务器 • 阅读 5

CORS（Cross-Origin Resource Sharing，跨域资源共享）是现代Web开发中一个重要的概念，它允许服务器指定哪些外部域名可以访问其资源。在TypeScript服务器中正确配置CORS，确保前端应用能够安全地与后端API进行交互。本文将详细介绍如何在TypeScript服务器中设置CORS。

理解CORS的基本原理

CORS是一种基于HTTP头部的机制，旨在防止恶意网站通过用户浏览器发起未经授权的跨站请求。当客户端发出跨域请求时，浏览器会自动检查响应头中的CORS字段，以确定是否允许该请求。常见的CORS相关HTTP头部包括：

Access-Control-Allow-Origin: 指定允许访问资源的源（协议+域名+端口）。可以设置为特定的源或通配符“”表示允许所有源。
Access-Control-Allow-Methods: 指定允许使用的HTTP方法（GET, POST, PUT等）。
Access-Control-Allow-Headers: 指定允许自定义的请求头。
Access-Control-Allow-Credentials: 表示是否允许发送Cookie或HTTP认证信息。

使用Express框架设置CORS

大多数TypeScript服务器项目都基于Node.js和Express框架构建。为了简化CORS配置过程，我们可以利用名为cors的中间件库。在终端中执行以下命令安装依赖：

npm install cors express

接下来，在项目的入口文件（通常是index.ts或app.ts）中引入并使用此中间件：

import express from 'express';
import cors from 'cors';
const app = express();
// 允许所有来源访问
app.use(cors());
// 或者指定允许的来源
app.use(cors({
  origin: 'http://example.com',
}));
// 定义路由...
app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello World!' });
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

高级CORS配置选项

除了基本用法外，有时我们还需要更精细地控制CORS行为。例如，只对某些路径启用跨域支持、限制可接受的方法类型等。此时可以通过传递对象参数给cors()函数来实现这些需求。

methods: 限定允许的HTTP请求方法，默认值为[‘GET’, ‘HEAD’]。
allowedHeaders: 限定允许的请求头，默认为空数组[]。
credentials: 设置为true以允许包含凭据（如Cookies），默认false。
maxAge: 预检请求结果缓存的最大时间（秒），默认不设置。

下面是一个例子，展示了如何为特定路由单独配置CORS：

app.get('/api/private-data', cors({
  origin: ['https://trusted-site1.com', 'https://trusted-site2.com'],
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
}), (req, res) => {
  // 处理请求...
});