Middleware CORS

Cloudflare Workers est souvent utilisé pour créer des API web appelées depuis une application front-end externe. Dans ce cas, il faut mettre en place CORS. Faisons-le également avec un middleware.

Importation

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

Utilisation

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

Plusieurs origines :

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

Méthodes autorisées déterminées dynamiquement selon l’origine :

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

Options

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

La valeur de l’en-tête CORS « Access-Control-Allow-Origin ». Vous pouvez aussi passer une fonction de rappel, par exemple origin: (origin) => (origin.endsWith('.example.com') ? origin : 'http://example.com'). La valeur par défaut est *.

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

La valeur de l’en-tête CORS « Access-Control-Allow-Methods ». Vous pouvez aussi passer une fonction de rappel pour déterminer dynamiquement les méthodes autorisées selon l’origine. La valeur par défaut est ['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH', 'QUERY'].

facultatif allowHeaders: string[]

La valeur de l’en-tête CORS « Access-Control-Allow-Headers ». La valeur par défaut est [].

facultatif maxAge: number

La valeur de l’en-tête CORS « Access-Control-Max-Age ».

facultatif credentials: boolean

La valeur de l’en-tête CORS « Access-Control-Allow-Credentials ».

facultatif exposeHeaders: string[]

La valeur de l’en-tête CORS « Access-Control-Expose-Headers ». La valeur par défaut est [].

Configuration CORS selon l’environnement

Pour adapter la configuration CORS à l’environnement d’exécution, par exemple au développement ou à la production, il est pratique d’injecter les valeurs depuis des variables d’environnement. L’application n’a ainsi pas besoin de connaître son propre environnement d’exécution. L’exemple ci-dessous illustre cette approche.

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

Utilisation avec Vite

Lorsque vous utilisez Hono avec Vite, désactivez la fonctionnalité CORS intégrée de Vite en définissant server.cors sur false dans votre fichier vite.config.ts. Cela évite les conflits avec le middleware CORS de Hono.

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