在unjs/h3项目中实现CORS跨域资源共享的最佳实践

跨域资源共享(CORS)是现代Web开发中不可或缺的重要机制。本文将深入探讨如何在unjs/h3项目中正确配置CORS，帮助开发者解决前端应用与API服务之间的跨域通信问题。

CORS基础概念

CORS(Cross-Origin Resource Sharing)是一种安全机制，它允许运行在一个域名上的Web应用访问来自不同域名的资源。浏览器出于安全考虑，默认会阻止跨域请求，而CORS就是用来定义哪些跨域请求是被允许的。

unjs/h3中的CORS实现

unjs/h3框架提供了简洁的CORS处理工具，开发者可以通过handleCors函数轻松配置跨域策略。以下是典型的实现方式：

router.use('/', 
  defineEventHandler(async (event) => {
    const corsHandled = handleCors(event, {
      origin: '*',  // 允许所有来源
      preflight: {
        statusCode: 204,  // 预检请求返回204状态码
      },
      methods: '*',  // 允许所有HTTP方法
    });

    if (corsHandled) {
      return;  // 如果是CORS相关请求，直接返回
    }
    // 其他业务逻辑...
  })
)

配置选项详解

1. origin：指定允许访问资源的来源

   • '*'：允许所有来源
   • 'https://example.com'：只允许特定域名
   • 数组：允许多个特定域名

2. methods：指定允许的HTTP方法

   • '*'：允许所有方法
   • ['GET', 'POST']：允许特定方法

3. preflight：配置预检请求(OPTIONS)的行为

   • statusCode：预检请求的响应状态码
   • headers：自定义响应头

最佳实践建议

1. 生产环境限制origin：虽然开发时可以使用'*'，但生产环境应明确指定允许的域名，提高安全性。

2. 合理设置methods：根据API实际需要，只开放必要的HTTP方法，减少潜在攻击面。

3. 预检请求优化：合理配置预检请求的缓存时间，减少不必要的OPTIONS请求。

4. 自定义响应头：根据需要添加Access-Control-Allow-Headers等自定义头，确保前端能发送必要的请求头。

通过正确配置CORS，开发者可以确保前端应用安全地与unjs/h3构建的后端API进行跨域通信，同时保持必要的安全防护。