CORS-Middleware

Cloudflare Workers werden häufig als Web-APIs verwendet, die von externen Frontend-Anwendungen aufgerufen werden. Dafür müssen wir CORS implementieren. Auch das lässt sich mit Middleware erledigen.

Import

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

Verwendung

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 })
})

Mehrere Origins:

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'
    },
  })
)

Erlaubte Methoden dynamisch anhand der Origin bestimmen:

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'],
  })
)

Optionen

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

Der Wert des CORS-Headers „Access-Control-Allow-Origin“. Du kannst auch eine Callback-Funktion übergeben, etwa origin: (origin) => (origin.endsWith('.example.com') ? origin : 'http://example.com'). Der Standardwert ist *.

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

Der Wert des CORS-Headers „Access-Control-Allow-Methods“. Du kannst auch eine Callback-Funktion übergeben, um erlaubte Methoden dynamisch anhand der Origin zu bestimmen. Der Standardwert ist ['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH', 'QUERY'].

optional allowHeaders: string[]

Der Wert des CORS-Headers „Access-Control-Allow-Headers“. Der Standardwert ist [].

optional maxAge: number

Der Wert des CORS-Headers „Access-Control-Max-Age“.

optional credentials: boolean

Der Wert des CORS-Headers „Access-Control-Allow-Credentials“.

optional exposeHeaders: string[]

Der Wert des CORS-Headers „Access-Control-Expose-Headers“. Der Standardwert ist [].

Umgebungsabhängige CORS-Konfiguration

Wenn du die CORS-Konfiguration an die Ausführungsumgebung anpassen möchtest, etwa Entwicklung oder Produktion, ist das Einfügen von Werten aus Umgebungsvariablen praktisch. So muss die Anwendung ihre eigene Ausführungsumgebung nicht kennen. Das folgende Beispiel verdeutlicht dies.

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

Mit Vite verwenden

Wenn du Hono mit Vite verwendest, solltest du die integrierte CORS-Funktion von Vite deaktivieren, indem du server.cors in deiner Datei vite.config.ts auf false setzt. So vermeidest du Konflikte mit Honos CORS-Middleware.

// 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()],
})