웹 애플리케이션을 개발할 때, 브라우저에서 프론트엔드 애플리케이션이 서버에게 요청을 보낼 때, 일반적으로 브라우저는 사전요청(preflight request)으로 OPTIONS 메소드를 사용합니다. 이때 서버는 CORS (Cross-Origin Resource Sharing) 정책을 준수하여 올바르게 응답해야 합니다.

이 문서에서는 타입스크립트로 개발된 서버에서 OPTIONS 메소드를 허용하는 방법을 설명하겠습니다.

CORS 처리 미들웨어 사용

import * as express from 'express';
import { Request, Response, NextFunction } from 'express';

const app = express();

app.use((req: Request, res: Response, next: NextFunction) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');

  // Preflight request에 대해 200 상태코드를 반환
  if (req.method === 'OPTIONS') {
    res.sendStatus(200);
  } else {
    next();
  }
});

위의 예제는 Express 프레임워크를 이용하여 CORS 처리를 위한 미들웨어를 작성한 것입니다. 모든 도메인에서의 요청을 허용하기 위해 Access-Control-Allow-Origin 헤더에 *를 설정하고, 허용하는 메소드와 헤더를 명시했습니다. 또한, preflight 요청에 대한 응답으로 상태코드 200을 반환하여 요청을 허용하였습니다.

이제, 서버는 OPTIONS 메소드를 통해 수신되는 사전요청을 정상적으로 처리할 수 있게 되었습니다.

결론

이 문서에서는 타입스크립트로 개발된 서버에서 OPTIONS 메소드를 허용하는 방법을 알아보았습니다. CORS (Cross-Origin Resource Sharing) 정책을 준수하여, 브라우저에서 수행하는 사전요청에 대해 올바른 응답을 하여 웹 애플리케이션의 보안과 안전성을 유지할 수 있습니다.

관련 자료: MDN Web Docs - HTTP 접근 제어 (CORS)