CORS 란?
웹 개발을 하면 꼭 마주하게 되는 에러 메세지, CORS와 CORS 에러에 대해 알아보자.
먼저, CORS는 Cross Origin Resource Sharing(교차 출처 리소스 공유)의 약자로, 서로 다른 도메인 간에 자원을 공유하는 것을 의미한다. 한 도메인의 웹 페이지가 다른 도메인의 리소스에 액세스 할 수 있게 하는 보안 매커니즘을 말한다.
웹 브라우저에서 웹 사이트가 로딩되는 과정에 대해 생각해보자.
1. 프론트엔드 서버에서 HTML, CSS, JavaScript 코드를 받아온다.
2. JavaScript 코드가 백엔드 서버에 리퀘스트를 보내서 데이터를 받아온다.
3. 데이터를 받아서 렌더한다.
- 프론트엔드 서버: https://my-service.com
- 백엔드 서버: https://my-service-api.com
위와 같은 서버 주소를 사용한다고 했을때, 웹 브라우저의 기본 정책은 자바스크립트 코드를 받아온 곳(프론트엔드 서버)에만 자바 스크립트로 추가적 리소스를 요청할 수 있다.
그런데 백엔드 서버에서 리소스를 받아오려고 하면 다른 도메인이기 때문에 오류가 발생하는 것이다.
이러한 정책을 SOP(Same-Origin Policy)라고 한다. 여기서 Origin은 리소스를 접근하는데 사용한 URL의 프로토콜 + 호스트 이름 + 포트 번호의 조합을 뜻한다. 프론트엔드 서버와 백엔드 서버는 호스트 이름이 다르기 때문에 SOP을 위반한다.
그럼 다른 Origin에서 리소스를 받아오는 것은 불가능한 일일까? 이것도 가능하다. 다른 Origin에서 리소스를 받아오려면 리소스를 제공하는 서버(백엔드 서버)에서 CORS를 허용하면 되는데 즉, 서버에서 프론트엔드 서버 Origin에 대한 CORS(교차 출처 리소스 공유)를 허용한다고 설정하면 되는 것이다. CORS를 따로 설정하지 않으면 CORS 에러가 발생한다.
CORS 에러를 허용하는 방법은 언어와 프레임워크에 따라 다르다.
CORS 에러 해결방법
1. 크롬 확장 프로그램 이용
chrome 브라우저에서는 CORS 문제를 해결하기 위한 확장 프로그램을 제공해준다.
아래 링크에서 Allow CORS 확장 프로그램을 설치해주고 활성화 시키면, 로컬(localhost) 환경에서 API 테스트시 발생되는 CORS 에러를 해결할 수 있다. 가장 간편한 해결 방법이다.
Allow CORS: Access-Control-Allow-Origin
Easily add (Access-Control-Allow-Origin: *) rule to the response header.
chrome.google.com
2. 프록시 사이트 이용
프록시(Proxy)란 클라이언트와 서버 사이의 중계 대리점 개념인데, 프론트에서 직접 서버에 리소스 요청을 했더니 서버에서 따로 설정을 하지 않아 CORS 에러가 발생하면, 모든 출처를 허용한 서버 대리점을 통해 요청을 하는 것이다.
다만 현재 무료 프록시 서버 대여 서비스들은 모두 악용 사례 때문에 api 요청 횟수 제한을 두어 실전에서 사용하기에는 무리가 있다고 한다. 실전에서는 직접 프록시 서버를 구축하여 사용해야 한다.
3. 서버에서 Access-Control-Allow-Origin 헤더 세팅
직접 서버에서 HTTP 헤더 설정을 통해 출처를 허용하게 설정하는 가장 정석적인 해결책. 서버의 종류에 따라 해결책도 다르니 각 서버의 문법에 맞게 HTTP 헤더를 추가해주면 된다.
CORS에 관련된 HTTP 헤더 값으로는 다음과 같은 종류가 있다고 하니 참고하자.
# 헤더에 작성된 출처만 브라우저가 리소스를 접근할 수 있도록 허용함.
# * 이면 모든 곳에 공개되어 있음을 의미한다.
Access-Control-Allow-Origin : https://naver.com
# 리소스 접근을 허용하는 HTTP 메서드를 지정해 주는 헤더
Access-Control-Request-Methods : GET, POST, PUT, DELETE
# 요청을 허용하는 해더.
Access-Control-Allow-Headers : Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization
# 클라이언트에서 preflight 의 요청 결과를 저장할 기간을 지정
# 60초 동안 preflight 요청을 캐시하는 설정으로, 첫 요청 이후 60초 동안은 OPTIONS 메소드를 사용하는 예비 요청을 보내지 않는다.
Access-Control-Max-Age : 60
# 클라이언트 요청이 쿠키를 통해서 자격 증명을 해야 하는 경우에 true.
# 자바스크립트 요청에서 credentials가 include일 때 요청에 대한 응답을 할 수 있는지를 나타낸다.
Access-Control-Allow-Credentials : true
# 기본적으로 브라우저에게 노출이 되지 않지만, 브라우저 측에서 접근할 수 있게 허용해주는 헤더를 지정
Access-Control-Expose-Headers : Content-Length
참고
CORS란? | 코드잇
웹 개발을 할 때 자주 발생하는 CORS(Cross-Origin Resource Sharing) 문제에 대해 알아봅시다. | 웹 개발을 할 때 프론트엔드와 백엔드를 연결하려고 하면 CORS라는 오류가 자주 발생합니다. 