hono-cors

简介

hono-cors 是 Hono 框架的跨域资源共享（CORS）中间件，它允许你配置 Web 应用程序以接受来自不同源的请求。这对于构建前后端分离的应用程序特别重要，可以让你的 API 安全地响应来自不同域的前端应用请求。

安装

bash

npm install hono @hono/cors

基本使用

typescript

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

const app = new Hono()

// 应用 CORS 中间件到所有路由
app.use('*', cors())

// 或者只应用到特定路由
app.use('/api/*', cors())

app.get('/', (c) => {
  return c.text('Hello World')
})

app.listen(3000)

高级配置

typescript

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

const app = new Hono()

// 自定义 CORS 配置
app.use(
  '/api/*',
  cors({
    // 允许的源，可以是字符串、正则表达式或函数
    origin: ['https://example.com', 'https://app.example.com'],
    // 或者使用函数动态决定
    // origin: (origin) => {
    //   return origin.endsWith('.example.com') ? origin : false
    // },

    // 允许的请求方法
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],

    // 允许的请求头
    allowHeaders: ['Content-Type', 'Authorization', 'X-Custom-Header'],

    // 暴露的响应头
    exposeHeaders: ['Content-Length', 'X-Request-Id'],

    // 是否允许发送凭据（如 cookies）
    credentials: true,

    // 预检请求的缓存时间（秒）
    maxAge: 600,

    // 是否处理预检请求
    preflight: true,
  }),
)

// 不同路由使用不同的 CORS 配置
app.use(
  '/public/*',
  cors({
    origin: '*', // 允许所有源
    allowMethods: ['GET'], // 只允许 GET 请求
    credentials: false,
  }),
)

app.get('/api/data', (c) => {
  return c.json({ message: '受保护的数据' })
})

app.get('/public/data', (c) => {
  return c.json({ message: '公开数据' })
})

app.listen(3000)

注意事项

在生产环境中，应该明确指定允许的源，避免使用通配符 '*'
如果需要发送 Cookie，必须设置 credentials: true，且 origin 不能为 '*'
预检请求（OPTIONS）的处理会自动完成，无需手动处理
建议根据实际需求配置 allowMethods 和 allowHeaders，避免过度开放
在使用 credentials: true 时，前端也需要相应配置 withCredentials: true
对于不需要 CORS 的内部 API，可以不应用此中间件，减少不必要的头部

hono-cors ​

简介 ​

安装 ​

基本使用 ​

高级配置 ​

注意事项 ​

hono-cors

简介

安装

基本使用

高级配置

注意事项