CORS ミドルウェア

Cloudflare Workers を Web API として使い、外部のフロントエンドアプリケーションから呼び出すケースは多くあります。 その場合には CORS を実装する必要があります。ミドルウェアで実装しましょう。

インポート

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

使い方

const app = new Hono()

// CORS should be called before the route
app.use('/api/*', cors())
app.use(
  '/api2/*',
  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,
  })
)

app.all('/api/abc', (c) => {
  return c.json({ success: true })
})
app.all('/api2/abc', (c) => {
  return c.json({ success: true })
})

複数のオリジン：

app.use(
  '/api3/*',
  cors({
    origin: ['https://example.com', 'https://example.org'],
  })
)

// Or you can use "function"
app.use(
  '/api4/*',
  cors({
    // `c` is a `Context` object
    origin: (origin, c) => {
      return origin.endsWith('.example.com')
        ? origin
        : 'http://example.com'
    },
  })
)

オリジンに応じて許可するメソッドを動的に決める場合：

app.use(
  '/api5/*',
  cors({
    origin: (origin) =>
      origin === 'https://example.com' ? origin : '*',
    // `c` is a `Context` object
    allowMethods: (origin, c) =>
      origin === 'https://example.com'
        ? ['GET', 'HEAD', 'POST', 'PATCH', 'DELETE']
        : ['GET', 'HEAD'],
  })
)

オプション

optional origin: string | string[] | (origin:string, c:Context) => string

CORS ヘッダー「Access-Control-Allow-Origin」の値です。origin: (origin) => (origin.endsWith('.example.com') ? origin : 'http://example.com') のようなコールバック関数も渡せます。デフォルトは * です。

optional allowMethods: string[] | (origin:string, c:Context) => string[]

CORS ヘッダー「Access-Control-Allow-Methods」の値です。コールバック関数を渡して、オリジンに基づき許可するメソッドを動的に決めることもできます。デフォルトは ['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH', 'QUERY'] です。

optional allowHeaders: string[]

CORS ヘッダー「Access-Control-Allow-Headers」の値です。デフォルトは [] です。

optional maxAge: number

CORS ヘッダー「Access-Control-Max-Age」の値です。

optional credentials: boolean

CORS ヘッダー「Access-Control-Allow-Credentials」の値です。

optional exposeHeaders: string[]

CORS ヘッダー「Access-Control-Expose-Headers」の値です。デフォルトは [] です。

環境に応じた CORS 設定

開発環境や本番環境などに応じて CORS 設定を調整する場合、環境変数から値を注入すると便利です。アプリケーションが自身の実行環境を意識する必要がなくなります。次の例を参照してください。

app.use('*', async (c, next) => {
  const corsMiddlewareHandler = cors({
    origin: c.env.CORS_ORIGIN,
  })
  return corsMiddlewareHandler(c, next)
})

Vite との併用

Hono と Vite を併用する場合は、vite.config.ts で server.cors を false に設定し、Vite 組み込みの CORS 機能を無効にしてください。Hono の CORS ミドルウェアとの競合を防げます。

// vite.config.ts
import { cloudflare } from '@cloudflare/vite-plugin'
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    cors: false, // disable Vite's built-in CORS setting
  },
  plugins: [cloudflare()],
})