[NestJS] CORS 설정과 주의할 점(preflight)

설정하기에 앞서 CORS란 무엇인가부터 간략하게 알아보자

 

CORS란 교차 출처 리소스 공유(Cross-Origin Resource Sharing)의 약자이고 출처가 다른 자원들을 공유한다는 것인데 웹 애플리케이션에서는 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청이 발생한다. 

 

요약하자면 CORS 설정을 통해 서버로 접근할 수 있는 자원을 통제한다고 보면 되고 이를 하지 않는다면 아무나 서버로 API 요청을 하고, 중요한 정보가 탈취당하거나 삭제되는 불상사가 발생할 것이다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

 

이제 NestJS 서버에서 CORS설정을 하는 법을 알아보자 

네스트 공식에서는 위와 같이 매우 간단히 설정할 수 있다고 알려주고 있다. 이미지 위에 나오는 방식은 enableCors()에 직접 cors에 대한 세부내용들을 설정할 수 있고 밑에 나오는 방식은 default로 지정되어 있는 cors 설정을 사용하는 것이다. 보통 밑에 나오는 방식을 많이 사용하는데 이 경우 CORS default설정은 이러하다 

 

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

 

나도 그냥 이렇게 써왔다. 근데 이걸 알면서 이렇게 쓰는 거랑 모르면서 그냥 쓰고 있는 건 다르다.

나는 솔직히 default설정을 모르고 사용해왔다.  세부 설정에 관해서는 NestJS에서 사용하는 공식문서를 보고 공부하도록 하자 

 

결론적으로 내가 이 글을 작성하게 된 이유는 preflight 요청이 계속 발생해서 API 요청이 많을수록 서버 자원을 많이 사용하고 그로 인해 사이트가 계속 느려져서인데 이에 관한 solution이 잘 나와있지 않았다. 아무도 이런 실수를 하지 않는 건가..... 하여튼 결론적으로는 cors 설정 중에 maxAge 설정을 함으로 해결했다. 

 

위에 링크한 MDN CORS 글에 이런 내용이 있다. 

 CORS 명세는 브라우저가 요청을 OPTIONS 메서드로 "프리플라이트"(preflight, 사전 전달)하여 지원하는 메서드를 요청하고, 서버의 "허가"가 떨어지면 실제 요청을 보내도록 요구하고 있다. 

 

여기서 허가가 떨어질 때 서버에서는 설정해놓은 cors 설정에 대한 내용들을 알려주는데 그중에 maxAge 설정은 CORS 헤더의 Access-Control-Max-Age 값을 설정하며 preflight 요청을 보내 서버로부터 허가를 받은 경우 이 허락 정보를 캐싱해놓고, 일정 기간 동안 preflight 요청을 생략하고 요청과 응답을 받을 수 있게 해 준다. 여기서 몇 초간 허가정보를 캐싱할지 설정할 수 있다.

 

설정 방법

  app.enableCors({
    maxAge: 86400,
  });

이 예시는 CORS에 대한 모든 설정법이 아니고 오직 maxAge만 설정한 예시이니 참고하길 바란다. 86400은 86400초로 하루를 뜻한다.