itty-router CORS 功能优化与实现解析

背景与问题分析

itty-router 是一个轻量级的 JavaScript 路由库，特别适合在边缘计算环境中使用。在 Web 开发中，跨域资源共享(CORS)是一个常见需求，但 itty-router 原有的 CORS 实现存在几个关键问题：

1. 配置繁琐：用户需要手动注册上游中间件和下游的 corsify 响应修改器
2. 竞态条件：当需要镜像请求来源(origin)到响应头时，使用了作用域全局变量，这在并发请求下会出现污染问题
3. 默认行为不符合预期：现有的实现默认镜像来源，而这并非大多数场景下的需求

技术实现改进

竞态条件解决方案

原实现使用全局变量存储允许的来源，导致并发请求时可能出现数据污染。新版本通过两种方式解决：

1. 请求级处理：将 CORS 处理逻辑完全放在单个请求上下文中执行
2. 可选镜像：默认不镜像来源，仅在需要时通过显式配置启用

API 设计优化

新版本对 CORS API 进行了重新设计，使其更加直观和灵活：

// 新版使用示例
import { AutoRouter, createCors } from 'itty-router'

const { preflight, corsify } = createCors()

const router = AutoRouter({
  before: [preflight],        // 前置处理
  finally: [corsify],         // 最终处理
}).get('/', () => 'test')

export default router

关键改进点

1. 分离关注点：将预检请求(preflight)和响应处理(corsify)明确分离
2. 请求上下文传递：corsify 现在接受响应和请求两个参数，确保能正确获取来源
3. 性能优化：避免了每次请求都重新创建 CORS 处理器

实际应用场景

基本用法

对于不需要镜像来源的简单场景：

import { Router, createCors } from 'itty-router'

const router = Router()
const { preflight, corsify } = createCors()

router
  .all('*', preflight)
  .get('/', () => 'Hello World')

export default {
  fetch: (req) => router.fetch(req).then(res => corsify(res))
}

高级配置

需要镜像来源或处理 Cookie 的场景：

const { preflight, corsify } = createCors({
  origins: ['https://example.com'],
  credentials: true
})

// 使用时确保传递原始请求
.then(response => corsify(response, request))

技术决策考量

1. 默认行为变更：从安全角度考虑，默认不镜像来源更符合最小权限原则
2. 性能与正确性平衡：在保证正确性的前提下，通过优化设计减少性能开销
3. API 一致性：保持与 itty-router 整体设计风格一致，同时提供必要的灵活性

总结

itty-router 的 CORS 功能改进展示了如何通过精心设计解决实际开发中的痛点问题。新实现不仅解决了竞态条件这一技术难题，还通过更合理的 API 设计提升了开发体验。这种改进思路值得在其他中间件设计中借鉴——在保证功能完整性的同时，追求简洁性和正确性。