CORS 与 Logger

CORS 和日志是 API 项目最常见的中间件。Hono 内置了 cors 和 logger，可以直接使用。

启用 Logger

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

const app = new Hono()

app.use(logger())

app.get('/health', (c) => c.json({ ok: true }))

Logger 会输出请求方法、路径、响应状态码和耗时，适合开发环境快速观察请求。

生产环境中，建议使用结构化日志，把请求 ID、用户 ID、状态码、耗时和错误信息输出到日志平台。

启用 CORS

import { cors } from 'hono/cors'

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

如果前端和 API 不在同一个域名下，就需要配置 CORS。

指定跨域来源

app.use(
  '/api/*',
  cors({
    origin: 'https://example.com',
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowHeaders: ['Content-Type', 'Authorization'],
    credentials: true,
  }),
)

多个来源：

const allowedOrigins = ['https://app.example.com', 'https://admin.example.com']

app.use(
  '/api/*',
  cors({
    origin: (origin) => {
      return allowedOrigins.includes(origin) ? origin : ''
    },
    credentials: true,
  }),
)

注册顺序

CORS 应该在业务路由之前注册：

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

app.get('/api/users', (c) => {
  return c.json([])
})

如果 CORS 注册太晚，浏览器的预检请求可能无法得到正确响应。

常见问题

问题	原因与处理
浏览器提示 CORS 错误	检查 `origin`、方法、请求头是否被允许。
携带 Cookie 失败	需要 `credentials: true`，前端请求也要设置 `credentials`。
预检请求失败	确认 CORS 中间件注册在路由前面。
本地开发正常，线上失败	检查线上域名是否加入允许列表。

不要在生产环境随意使用 origin: '*' 加凭证请求。公开 API 可以放宽来源，后台管理、用户态接口应该明确来源。