Cloudflare Worker+HonoJS开发环境全局CORS配置遇OPTIONS 404问题

问题场景 #

刚上手Cloudflare Worker，用官方推荐的HonoJS做路由框架，按文档配置全局CORS后，本地开发环境（npm run dev）里OPTIONS预飞请求一直返回404，暂未测试生产环境，需要实现全局CORS生效。

当前代码：

import { Hono } from 'hono'
import { cors } from 'hono/cors'
import { basicAuth } from 'hono/basic-auth'

import { default as register } from './register.js'

const app = new Hono()
app.use('*', cors())

const user = new Hono()
// 也曾尝试: user.use('/*', cors())
user.post('/register', register)

// 注册路由组
app.route('/user', user)

export default app

试过的带参数CORS配置：

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

解决方法 #

• 显式注册OPTIONS通配路由
  Hono的CORS中间件虽会自动处理OPTIONS请求，但在路由组嵌套场景下，预飞请求可能没被全局中间件捕获。在根app中添加单独的OPTIONS路由处理：

const app = new Hono()
// 先处理所有OPTIONS请求
app.options('*', cors())
// 再挂载全局CORS中间件
app.use('*', cors())

• 确保路由组内中间件生效
  把CORS中间件直接挂载到路由组的最前面，保证组内所有请求都经过CORS处理：

const user = new Hono()
// 路由组内优先挂载CORS中间件
user.use('/*', cors())
user.post('/register', register)

• 本地环境校验
  确认前端请求的origin和CORS配置中的origin完全一致（比如你配置的是http://localhost:5173，前端就不能用127.0.0.1:5173发起请求）；另外检查Wrangler本地开发服务器是否正常转发请求，无需额外配置Wrangler，Hono的CORS中间件即可处理本地跨域。

内容的提问来源于stack exchange，提问作者David