在Server.js中实现CORS预检请求的完整指南

什么是CORS预检请求

CORS(跨源资源共享)预检请求是浏览器在发送某些跨域请求前自动发起的一种OPTIONS请求。当请求满足以下条件时，浏览器会先发送预检请求：

• 使用了PUT、DELETE、CONNECT、OPTIONS、TRACE或PATCH方法
• 设置了自定义请求头
• Content-Type不是application/x-www-form-urlencoded、multipart/form-data或text/plain

Server.js中实现CORS预检的两种方式

1. 使用原生中间件实现

Server.js提供了简洁的中间件机制，我们可以通过以下方式手动实现CORS预检支持：

const corsMiddleware = [
  // 设置允许的源
  ctx => ctx.header("Access-Control-Allow-Origin", "*"),
  // 设置允许的请求头
  ctx => ctx.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"),
  // 设置允许的HTTP方法
  ctx => ctx.header("Access-Control-Allow-Methods", "GET, PUT, PATCH, POST, DELETE, HEAD"),
  // 处理OPTIONS预检请求
  ctx => ctx.method.toLowerCase() === 'options' ? 200 : false
];

// 使用中间件
server({}, corsMiddleware, /* 其他路由 */);

这种方式简单直接，适合简单的跨域需求。但需要注意安全性问题，特别是使用通配符(*)允许所有源时。

2. 使用Express的cors中间件

对于更复杂的需求，推荐使用经过充分测试的cors包：

import server from 'server';
import ExpressCors from 'cors';

// 配置cors中间件
const cors = server.utils.modern(ExpressCors({
  origin: ['https://example.com', 'https://example2.com'] // 明确指定允许的源
}));

// 启动服务器并应用中间件
server({}, cors, /* 其他路由 */);

这种方式提供了更多配置选项和更好的安全性，适合生产环境使用。

最佳实践建议

1. 安全性：生产环境中应避免使用通配符(*)，而是明确指定允许的源
2. 性能：预检请求会增加一次额外的HTTP请求，合理设置Access-Control-Max-Age可以减少预检次数
3. 测试：确保测试各种跨域场景，特别是带自定义头和特殊Content-Type的请求
4. 错误处理：为CORS错误添加适当的错误处理和日志记录

通过以上方法，开发者可以在Server.js项目中灵活地实现CORS支持，满足不同场景下的跨域需求。