Of "CORS"?? CORS에 대해 알아보자~
시작하며
개발을 하다보면 CORS에러가 뜬걸 많이 보셨을 겁니다.
이번 글에선 그런 CORS가 무엇인지, 왜 발생하는지, 어떻게 해결하는지 알아보겠습니다.
CORS란?
CORS(Cross-Origin Resource Sharing)는
다른 출처의 리소스를 요청할 수 있도록 허용하는 브라우저 보안 정책입니다.
쉽게 말하면 내 웹사이트가 다른 서버에 있는 데이터를 요청해도 되는지 검사하는 규칙입니다.
Origin이란?
CORS를 이해하려면 먼저 Origin을 알아야 합니다.
Origin은 도메인, 프로토콜, 포트의 집합입니다.
예시로
https://kanghyeon.com:3000 이런 주소가 있다면
프로토콜은 https
도메인은 kanghyeon.com
포트번호는 3000입니다.
CORS는 왜 발생할까?
기본적으로 브라우저에는 Same-Origin Policy(SOP, 동일 출처 정책) 이 있습니다.
이 정책은 같은 Origin에서만 리소스 요청을 허용하는 보안 정책입니다.
예를 들어
http://localhost:3001 이러한 서버에서
https://kanghyeon.com 이곳으로 요청을 보내면 Origin이 다르기 때문에 브라우저가 요청을 차단합니다.
이때 등장하는 개념이 바로 CORS입니다.
위에서 설명한 것처럼 SOP가 서로 다른 출처일 때 리소스 요청과 응답을 차단하는 정책이라면,
CORS는 서로 다른 출처라도 리소스 요청과 응답을 허용할 수 있도록 하는 정책입니다.
그래서 우리가 만나는 에러도 대부분 CORS가 가능하도록 설정하라는 내용으로 이루어져 있습니다.
뒤에서 설명할 해결 방법에 등장하는 헤더인 Access-Control-Allow-Origin도
허용되는 출처에 대한 접근 제어라는 의미라고 이해할 수 있습니다.
CORS 에러 대응
서버에서 응답헤더 세팅하기
서버에서 Access-Control-Allow-Origin 헤더를 설정해서 수락할 출처를 명시적으로 지정할 수 있습니다.
이 헤더를 세팅하면 출처가 다르더라도 리소스 요청이 허용됩니다.
예를들어
Access-Control-Allow-Origin: https://kanghyeon.com이런식으로 특정 웹사이트 https://kanghyeon.com 에서만 오는 요청을 허용하게 설정할 수도 있고,
Access-Control-Allow-Origin: *이런식으로 모든 사이트의 요청을 허용하게 설정할 수도 있습니다.
하지만 *를 사용하여 설정하게 된다면 모든 접근을 허용하기 때문에 보안에 취약해질 수 있습니다.
따라서 Access-Control-Allow-Origin: https://kanghyeon.com 이와 같이 직접 출처를 세팅하는 방식이 더 좋습니다.
proxy 서버 사용하기
웹이 리소스를 직접적으로 요청하는 대신, 프록시 서버를 사용하여 웹에서 리소스로 요청을 전달하는 방법이 있습니다.
이 방법을 사용한다면 웹이 리소스랑 동일한 출처에서 요청을 보내는 것처럼 보여서 CORS 에러를 방지 할 수 있습니다.
예를들어
https://kanghyeon.com에서 동작하는 웹이
https://api.kanghyeon.com에서 데이터를 요청한다면 두 도메인이 다르기 때문에 CORS 설정을 제대로 하지 않으면 요청이 실패할 수도 있습니다.
이 문제를 해결하려면 웹에서 직접 https://api.kanghyeon.com에 api를 요청하는 대신, 같은 https://kanghyeon.com에 위치한 프록시 서버를 통해 api 요청을 중간에서 하도록 구성 해주면 됩니다.
때문에 브라우저 입장에선 https://kanghyeon.com에서 요청한 것처럼 보이기 때문에 CORS 검사 없이 응답 받는게 가능 합니다.'
흐름
브라우저 → https://kanghyeon.com (프록시 서버) → https://api.kanghyeon.com마치며
이번 글에서는 CORS라는 개념에 대해 알아보았습니다.
개발을 하며 많이 접했던 오류여서 찾아보게 되었는데, 에러를 어떻게 대응하는지에 대한 부분이 특히 도움이 많이 되었던 것 같습니다.
이 밖에도 다양한 해결 방법이 있지만, 이번 글에서는 가장 기본적인 개념과 대표적인 해결 방법 위주로 정리해보았습니다.
글 읽어 주셔서 감사합니다!!
