CORS, credentials

 배포를 하는데 프론트 쪽에서 CORS 정책 에러가 발생했다는 소식을 들었다. 처음 듣는 말이라 구글링을 해 봤다.

 

 CORS는 다른 도메인(Origin) 간에 데이터를 주고받을 수 있도록 허용하는 보안 메커니즘으로, 프론트에서 백엔드에 데이터를 요청하는 경우 CORS를 기반으로 하여 HTTP 요청을 하게 되는데, 적절한 설정이 되어있지 않은 경우 코드상 문제가 없다고 하더라도 HTTP 에러가 발생할 수 있고, 보안 측면에서도 허용되지 않은 출처의 서비스가 악의적인 목적으로 데이터를 요청하고 응답받는 등의 사고가 발생할 수 있기 때문에 CORS 관련 설정을 해 주어야 한다는 사실을 알았다. 

 

 NestJS에서 CORS 설정을 하려면 main.ts에 enableCors()코드를 추가하면 된다.

// main.ts
async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.enableCors({ origin: true });
  await app.listen(3000);
}
bootstrap();

 

 

origin에 true를 넣는 것은 보안 상 적절하지 않은 코드이지만, develop 단계이기 때문에 우선 true로 설정했다. true로 설정하면 모든 도메인에서의 요청을 허용하게 된다. 배포 후 도메인을 넣으면 된다.

 

 

 

 

 CORS 정책 문제를 해결하니 이번엔 프론트로 cookie에 jwt token이 넘어오지 않고 있었다. postman으로 테스트하면 분명 넘어갔는데, 계속 문제가 생겼다. 구글링을 몇 시간 동안 해 보니 credentials라는 옵션을 지정하지 않아 발생한 문제였다. 

 credentials는 다른 도메인 간의 요청을 처리할 때 인증 정보를 함께 전송할지 여부를 지정하는 옵션이라고 한다. main.ts 에 credentials 옵션을 넣으니 정상적으로 작동했다.

// main.ts
async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.enableCors({ origin: true, credentials: true });
  await app.listen(3000);
}
bootstrap();