[NestJS] CORS default의 함정

nestjs cors 설정 관련해서는 저번에 https://coking.tistory.com/18 이 글에서 한 번 다룬 적이 있다. 
하지만 초보자들이 default 옵션을 쓰다가 cors 옵션 관련해서 새로운 옵션들을 추가하다가 똑같은 실수를 자주 하는 걸 많이 봐서 이렇게 작성해 본다. 

 

어느 정도 개발을 하다 보면 보안적인 측면을 고려하게 되면서 분명히 

 

  const app = await NestFactory.create(AppModule, { cors: true });

 

이렇게만 사용하던 cors 설정을 아래와 같은 코드 설정을 통해 허용된 도메인만 서버에 접근하게 하려 하는 경우가 있다.

 

  const app = await NestFactory.create(AppModule, { cors: true });

	app.enableCors({
		origin: [
			"https://test.kr",
			"https://codingboddary.co.kr"
		],
		maxAge: 86400,
		credentials: true
	});

 

그래서 이렇게 적용해 보면 신기하게 maxAge, credentials 옵션을 굉장히 잘 적용되는데 origin 잘 적용되지 않다는 것을 알게 될 것이다. 과연 왜일까? 

바로 첫 번째 줄에서 작성한 { cors : true} 옵션에는 origin 관련 default 설정 값들이 있기 때문이다.  

최초 설정에서 들어간 default 값들은 추가 설정 값들로 덮어지지 않는다는 것을 명심하자

 

express cors 공식 깃헙 문서의 기본 설정 default 값 먼저 확인해 보자 

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

여기에 보면 origin default 값이 있고 maxAge, credentials 값은 없는 게 보일 것이다.  그 이유는 공식 문서에 Configuration Options 부분을 읽어보면 maxAge, credentials는 추가 설정 값이 없으면 생략한다고 나와있기 때문이다. 

 

정리하자면 최초 cors 설정에서 origin은  default 값이 있고 maxAge나 credentials는 default 값이 없었으니 origin은 새로운 값이 반영이 안 되고 다른 설정은 값이 새롭게 반영된 것이다.   

 

결론적으로는 일단 cors 설정 코드를 하나로 줄이고 거기에 origin 설정 값이나 자신이 넣고자 하는 값을 직접 지정해 주면 된다. 

	app.enableCors({
		origin: [
			"https://test.kr",
			"https://codingboddary.co.kr"
		],
		maxAge: 86400,
		credentials: true
	});

이런 식으로!!!  이렇게 하면 정상적으로 내가 원하는 옵션들이 적용되는 걸 확인할 수 있을 것이다.