AI通识课
如何在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,你清楚它们之间的区别吗?😉
「架构师的修炼」大礼包
管理者入门与进阶课程