CORS 미들웨어

Cloudflare Workers를 웹 API로 사용하고 외부 프론트엔드 애플리케이션에서 호출하는 다양한 사례가 있다. 이를 위해 CORS를 구현해야 한다. 미들웨어를 사용하여 이 작업을 수행해보자.

Import

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

사용 방법

const app = new Hono()

// CORS는 라우트보다 먼저 호출해야 한다
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'],
  })
)

// 또는 "함수"를 사용할 수 있다
app.use(
  '/api4/*',
  cors({
    // `c`는 `Context` 객체
    origin: (origin, c) => {
      return origin.endsWith('.example.com')
        ? origin
        : 'http://example.com'
    },
  })
)

옵션

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

"Access-Control-Allow-Origin" CORS 헤더의 값을 설정한다. origin: (origin) => (origin.endsWith('.example.com') ? origin : 'http://example.com')과 같은 콜백 함수를 전달할 수도 있다. 기본값은 *이다.

optional allowMethods: string[]

CORS 헤더인 "Access-Control-Allow-Methods"의 값을 설정한다. 기본값은 ['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH']이다.

optional allowHeaders: string[]

CORS 헤더인 "Access-Control-Allow-Headers"의 값을 설정한다. 기본값은 []이다.

선택 사항 maxAge: number

"Access-Control-Max-Age" CORS 헤더의 값을 설정한다.

선택 사항 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)
})