← Notes
Notes

Nest.js CORS 설정

Nest.js 백엔드 개발· 5 / 8
  1. 1 — Nest.js 프로젝트 생성과 구조
  2. 2 — Nest.js Decorator 동작원리와 종류, Custom Decorator
  3. 3 — Nest.js 의존성 주입 개념과 적용 방법
  4. 4 — Nest.js HTTP exceptions 에러 처리 모음
  5. 5 — Nest.js CORS 설정
  6. 6 — Nest.js 유효성 검사 — Validation Pipe와 class-validator
  7. 7 — Nest.js API 문서화 — Swagger Module
  8. 8 — Nest.js 환경 변수 관리 — Config Module

현재 진행 중인 토이프로젝트는 프론트엔드 개발자분과 함께 협업으로 진행하고 있는 프로젝트이다.

그렇기에 백엔드를 실제로 외부에서 사용이 가능한 상태로 만들어야 하고, 올바르게 사용할 수 있도록 참고할 수 있는 매뉴얼도 필요하다.

Nest.js에는 프론트엔드와 협업을 위한 다양한 설정을 내부에서 혹은 라이브러리 호환을 제공한다. 그 중 가장 기본이 되는 설정별로 문서를 구분해 하나씩 정리해보자.

CORS

CORS 설정을 하는 이유

브라우저의 정책으로 인해 CORS 설정은 서버와 클라이언트 웹개발 시에는 사실상 필수라고 할 수 있다.

기본적으로 웹 브라우저는 보안을 위해 ‘동일 출처 정책(same-origin policy)’ 을 갖고 있는데, 악의적인 웹 사이트로부터의 공격을 방지하기 위해 동일 출처에서만 리소스를 요청할 수 있도록 제한한다.

이후 동일한 도메인으로 서버와 클라이언트를 배포하면 CORS 문제가 발생하지 않겠지만, Localhost를 사용하는 개발 시점에서는 ‘동일 출처 정책’에서 어긋나므로 CORS 설정을 해주어야 한다.

CORS 설정

Nest.js에서는 main.ts에 enableCors() 메소드를 이용해 CORS를 설정할 수 있다.

import { AppModule } from './app/app.module';
import { NestFactory } from '@nestjs/core';
import { ConfigService } from '@nestjs/config';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const config = app.get(ConfigService);

  const port = config.get<number>('PORT');
  const corsOriginDevelopment = config.get<string>('CORS_ORIGIN_DEVELOPMENT');
  const corsOriginProduction = config.get<string>('CORS_ORIGIN_PRODUCTION');

  app.enableCors({
    origin: [corsOriginDevelopment, corsOriginProduction],
    credentials: true,
  });

  await app.listen(port);
}
bootstrap();

enableCors() 메소드의 옵션으로 두 가지만 설정해주었다.

  • origin: 서버에 요청을 보낼 수 있는 클라이언트를 지정할 수 있다.
  • credentials: 클라이언트에 쿠키와 같은 인증 정보를 전송할 수 있는지 여부를 나타낸다. 클라이언트와 쿠키를 주고 받아야하므로 true로 지정해두었다.
목차