[NestJS] Angular에서 Nest 호출, CORS 해결

front인 angular에서 nest를 호출하려고 하니 4200번, 3000번 간의 CORS 정책 문제가 발생하였어요.

이를 해결하기 위해 nest를 수정해보도록 합니다.

먼저 패키지 설치를 해줍니다.

$ npm install --save cors

 

app을 시작하는 부분 저는 'main.ts'에요. 이 소스를 추가해줍니다.

app.enableCors();

전체적인 소스는 아래와 같아요.

import { ValidationPipe } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { SwaggerModule } from '@nestjs/swagger';
import { SwaggerConfig } from './shared/conf/swagger.config';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(
    new ValidationPipe({
      whitelist: true,
      forbidNonWhitelisted: true,
      transform: true,
    }),
  );

  const swaggerUiEndpoint = '/swagger';
  const document = SwaggerModule.createDocument(app, SwaggerConfig);
  SwaggerModule.setup(swaggerUiEndpoint, app, document);
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

소스코드 한 줄이라 아주 간단하네요.

 

프런트에서 호출한 결과 발생했던 에러 대신 access_token이 정상적으로 넘어옵니다.