면접에서 질문을 받는다는 상황을 가정하고, 거기에 대응해서 어떻게 답변을 할 수 있을지를 고민하며 블로깅을 이어나가는 중입니다. 오늘은 CORS 와 관련한 질문에 대한 답변을 고민해보려고 합니다.
CORS(Cross-Origin Resource Sharing), 한국말로는 교차 출처 리소스 공유라고 번역되어 있습니다. 번역을 하면서 교차라고 번역되었지만, 실제로는 서로 다른 출처 간의 리소스를 공유하는 것과 관한 내용이라고 이해할 수 있습니다.
출처가 서로 다르다고 할 때, 이 출처는 domain, scheme, port 를 말합니다. 예를 들어 http://velog.io:80
와 같은 주소가 있다고 하면 http://
부분이 scheme, velog.io
가 domain, :80
이 port 를 의미하겠죠.
웹 생태계가 점차로 다양해지면서 서로 다른 오리진 간에 자료를 요청하고 공유해야 하는 상황이 빈번하게 발생하게 되었습니다. 문제는 만약 서로 다른 오리진 간에 자료를 요청하는 것에 아무런 제약이 없다면, 악의적인 공격으로 사용자의 정보를 탈취하는 것이 너무 쉬워진다는 겁니다.
그래서 Same-Origin Policy 와 CORS 정책이 존재합니다. 같은 오리진인 경우에는 당연하게도 서로 자료의 공유가 가능하게 되고, 오리진이 다른 경우에는 CORS 라는 정책을 잘 따라 진행된 요청으로만 자료를 공유할 수 있게 되는 것이죠.
Node.js 만으로 CORS 정책에 대응하는 것은 매우 번거로운 과정입니다. 그 대신 Express 프레임워크와 CORS 미들웨어를 사용하면 보다 더 간편하게 설정이 가능하죠. 관련한 설정 방법은 CORS 미들웨어와 관련한 문서를 참고하면 충분히 적용이 가능합니다.
프로젝트를 진행하면서 CORS 와 관한 에러를 겪은 적이 있습니다. 설정이 제대로 안 된 채로 진행하다 보니 CORS policy 에 의해 요청이 막혔다는 메시지가 갑자기 나타난 것이죠. 부랴부랴 CORS 를 어떻게 설정하는지 알아보고 적용해서 문제를 해결했었습니다.
문제를 해결하고 나서는 정작 CORS 와 관련한 동작들이 어떻게 진행하는지를 공부할 기회가 조금은 부족했었는데요. 이번 기회를 통해 조금이나마 정리해볼 수 있었던 것 같습니다. 사실 위에서 적은 답변에는 CORS 가 어떻게 동작하는지에 관한 내용이 조금 부족하다고 여겨 이 부분을 보강해야 할 것 같습니다.
관련해서 참고할만한 아주 좋은 블로그 글을 링크로 남기도록 하겠습니다. 개인적으로 이 글을 통해 CORS 에 관해 정말 많이 배울 수 있었는데요. 수료가 막바지로 다가와서인지 머리가 돌아가지를 않아, 추후에 다시 날을 잡아 정독하면서 이해해보려고 합니다.