如何在HonoJS里处理CORS请求？

之前在cloudflare worker的quick edit中写cors逻辑那是相当繁琐啊，有了hono之后，cors的处理变得so easy，因为hono提供了cors专用的中间件（middleware）：

import { Hono } from 'hono'
import { cors } from 'hono/cors'

const app = new Hono()

app.use('*', cors())
...

当然，假如觉得这样太open了，也可以限定指定的cors策略，比如，全都限定到*.afoo.me下。

但CORS规范显然不允许我们这样来指定规则表达式，所以，我们可以采取至少两种方式达到类似的目的。

方式一是使用function，因为hono的cors中间件允许我们指定一个function来动态承接cors请求，所以，我们可以这样：

app.use('*', cors({
        origin: (origin) => {
            console.log(`origin: ${origin}`)
            return origin.endsWith('.afoo.me') ? origin : 'https://afoo.me'
        },
    })
)

TIP

对于面向一批子域名（sub-domain）的cors规则，推荐「方式一」的做法。

方式二是利用Cloudflare workers的KV特性，在某个KV binding里指定一个key为cors(或者任何你喜欢的名字，比如叫corsRules或者corsOrigins等等，都可以)， 然后在它的value里指定你想添加的origin值都有哪些，比如，我通过逗号,分割指定多个origin如下：

https://afoo.me,https://edu.afoo.me,https://ai.afoo.me,https://images.afoo.me,https://auth.afoo.me

然后就可以在使用hono框架实现的workers中引用他们来作为cors的匹配规则了：

app.use("*", async (c, next) => {
    let corsRules = await c.env.cfg.get("cors")
    let corsMiddleware = cors({
        origin: corsRules.split(",").map((s) => s.trim())
    })
    await corsMiddleware(c, next)
})

当然， 在使用之前，不要忘了在wrangler.toml中配置这个kv binding：

[[kv_namespaces]]
binding = "cfg"
id = "797de3b817034cecb23024e9565677e3"

除此之外，hono的cors中间件还允许对cors策略做更进一步细化的配置和调整，比如：

app.use(
  '*',
  cors({
    origin: 'http://example.com',
    allowHeaders: ['X-Custom-Header', 'Upgrade-Insecure-Requests'],
    allowMethods: ['POST', 'GET', 'OPTIONS'],
    exposeHeaders: ['Content-Length', 'X-Kuma-Revision'],
    maxAge: 600,
    credentials: true,
  })
)

更多信息可以参考hono的cors文档，他家的文档写的也是相当简单明了。

TIP

注意本文很多地方用的是origin而不是domain，你清楚它们之间的区别吗？😉