현재 개발공부중이며, 해당 글에 틀린 내용이 있을 수 있습니다. 부족한 부분에 대해서 피드백을 주시면 수정하겠습니다.
부트캠프에서 팀 프로젝트를 할 당시에 나는 CORS에 대한 개념이 많이 부족한 상태에서 개발을 하였다. 그래서 어떻게든 에러만 처리하자는 마음으로 cors모듈을 사용하여 처리하였었다.
이 찝찝함에 대해서 간단하게 CORS에 대해서 공부하고 정리해보았다.
CORS
AJAX 요청을 할 때, 브라우저와 서버의 도메인이 같은지 확인한 후, 같다면 소스를 공유할 수 있게 허락하는 것이다.
도메인이 다를 경우 사전요청(preflight)을 브라우저가 우선적으로 요청하고, 서버에서 허용하는 도메인이라면 다시 실제 요청을 보낸다.
1. CORS에러
요청하는 도메인과 요청 받는 도메인이 다르다면 CORS 에러가 발생한다.
단, CORS는 브라우저에서 발생하는 에러이기 때문에 브라우저에서 서버로 요청을 보낼 때만 발생하는 에러이다. 서버에서 서버로 요청을 보낼 때에는 CORS에러가 발생하지 않는다.
2-1. cors 모듈을 통한 에러해결
서버에서 setHeader의 Access-Controll-Allow-Origin을 어떻게 설정해주냐에 따라서 허용 범위가 달라진다. 예를 들면, * 값을 주면 모든 도메인에 대한 CORS에러가 해결된다. 또, 쿠키의 허용을 위해서 Access-Controll-Allow-Creadentials도 설정 해주어야한다.
이 작업을 setHeader에 설정하지 않고, cors 모듈을 통해 쉽게 처리할 수 있다.
npm i cors
cors를 설치한 후, 각자의 프로젝트에 맞게 CORS를 셋팅해주면 된다.
위에서 언급했듯이 서버에서 서버로 요청시에는 CORS에러가 없기 때문에 cors처리가 필요한 라우터에만 CORS설정을 하는 것이 좋다.
자세한 사용방법은 cors 문서에서 확인하자.
2-2. 프록시 서버를 이용한 에러해결
프록시 서버를 사용하여 cors에러를 처리할 수 있다. 프록시는 대리인이라고 생각하면 된다.
cors에러가 발생하는 경우를 살펴보면, 브라우저에서 서버로 요청할 때 발생하고, 서버에서 서버로 요청할 때는 발생하지 않는다.
이 것을 토대로 클라이언트와 같은 도메인으로 프록시 서버를 만들어주면서 cors에러 없이 프록시 서버에 요청할 수 있다. 그리고 이 프록시 서버에서 실제 요청 서버인 API서버에 요청을 하면 서버간의 요청이기 때문에 cors에러가 발생하지 않는다.
그래서 프록시를 대리인이라고 생각한다. 중간 서버 그런 느낌이다.
직접 프록시 서버를 만들 수도 있지만, http-proxy-middleware 같은 패키지로 프론트 서버를 프록시 서버로 만들 수 있다고 한다.
프록시를 사용하여 cors처리를 하는 개념은 이해되었으나, 아직 사용해보지 못해서 방법은 따로 시간을 내어 공부해봐야겠다.
참고
Node교과서 - 제로초
댓글