NestJS CORS

😀필자는 백엔드 서버를 만들기 때문에 프론트엔드와 도메인의 오리진이 다르다. 따라서 서로 리소스를 주고받기위해서 반드시 CORS설정을 해줘야 한다.

NestJS에서는 CORS(Cross-Origin Resource Sharing) 설정을 통해 SOP에 해당하지 않는 다른 도메인의 리소스를 받기위한 방법을 간단하게 제공한다.

NestJS의 공식 페이지에서는 아래와 같은 코드들로 CORS설정을 할 수 있다고 제시한다.

const app = await NestFactory.create(AppModule);
app.enableCors();
await app.listen(3000);
//--------------------------위 또는 아래 방법
const app = await NestFactory.create(AppModule, { cors: true });
await app.listen(3000);

두 가지의 방법을 제시해 주며, 이 방법들은 기본적으로 Express cors패키지를 내부적으로 사용한다.

위의 두 가지 방법 모두 기본값을 적용시키기 때문에 기본옵션이 어떻게 설정되는지 알 필요가 있다.

위의 방법대로 CORS를 설정하면 설정된 기본옵션(default)은 다음과 같다.

{
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}

하지만 우리는 우리가 원하는 옵션만 사용하고 싶을 수 있다. 그렇다면 어떤 옵션을 설정할 수 있는지 알아봐야 겠다.

.enableCors()함수를 ctrl+click으로 step-in해서 option을 찾아가보면 CorsOption의 인터페이스를 확인할 수 있다.

export interface CorsOptions {
    /**
     * Configures the `Access-Control-Allow-Origins` CORS header. 
     See [here for more detail.](https://github.com/expressjs/cors#configuration-options)
    어떤 오리진과 연결을 허용할 것인가? 기본값 true or "*" */
    // type StaticOrigin = boolean | string | RegExp | (string | RegExp)[]
    // type CustomOrigin = (requestOrigin: string, callback: (err: Error | null, origin?: StaticOrigin) => void) => void
    origin?: StaticOrigin | CustomOrigin;
    /**
     * Configures the Access-Control-Allow-Methods CORS header.
     어떤 메소드의 연결을 허용할 것인가?*/
    methods?: string | string[];
    /**
     * Configures the Access-Control-Allow-Headers CORS header.
     어떤 헤더를 보낼 수 있도록 할 것인가?*/
    allowedHeaders?: string | string[];
    /**
     * Configures the Access-Control-Expose-Headers CORS header.
     브라우저에서 어떤 해더를 노출할 것인가?*/
    exposedHeaders?: string | string[];
    /**
     * Configures the Access-Control-Allow-Credentials CORS header.
     쿠키, 인증 헤더 등을 사용할 수 있게 할 것인가?*/
    credentials?: boolean;
    /**
     * Configures the Access-Control-Max-Age CORS header.
     CORS 프리플라이트 요청 결과를 캐싱할 시간을 몇으로 설정할 것인가?*/
    maxAge?: number;
    /**
     * Whether to pass the CORS preflight response to the next handler.
     CORS 프리플라이트 요청에 대한 응답이 다음 미들웨어로 전달되도록 할 것인가? 기본값 false*/
    preflightContinue?: boolean;
    /**
     * Provides a status code to use for successful OPTIONS requests.
     성공적인 OPTIONS 요청에 대한 응답 상태 코드를 어떤것을 보낼 것인가? 기본값 204*/
    optionsSuccessStatus?: number;
}

만약 내가 모든 도메인 오리진에 대해서 허용하고, Auth헤더를 브라우저에서 사용하고, 쿠키를 사용하고 싶다면 아래와 같은 형태가 될 것이다.

app.enableCors({
    origin: true,
    credentials: true,
    exposedHeaders: ['Authorization'], // * 사용할 헤더 추가.
  });

그렇다면 모든 오리진이 아닌 우리 프론트에서 배포한 서버의 오리진(https://www.example.shop)과 프론트엔드에서 개발을 위한 로컬서버의 오리진(http://localhost:3330)에 대해서만 설정하고 싶다면?

app.enableCors({
    origin: ['https://www.example.shop', 'http://localhost:3330'],
    credentials: true,
    exposedHeaders: ['Authorization'], // * 사용할 헤더 추가.
  });

두 가지 origin을 처음 설정할 때는 port의 구분처럼 process.env.port | 3300과 같이 쓰는 것이라 생각해서 작성해 보았지만 동작하지 않아 확인해보니 |연산자를 사용할 수 없었다. origin옵션의 StaticOrigin은 위 설정의 주석과 같이 boolean | string | RegExp | (string | RegExp)[]의 타입을 지원하기 때문에 위의 코드처럼 필요한 도메인을 배열의 형태로 넣어주어야 원하는 도메인들을 설정할 수있다.