✏️ CORS 란?
CORS는 Cross-Origin Resource Sharing 의 약자로, 직역하면 교차 출처 리소스 공유입니다. 출처가 다른 자원들을 공유한다는 뜻으로 다른 출처의 리소스 공유에 대한 허용/비허용 정책입니다.
이때 출처란? 위 URL 구성요소 중에서 Protocol(http) + Host(domain name) + Port(생략가능)를 합친 것을 말하며, 해당 3가지가 같으면 동일 출처(Same-Origin)라고 합니다.
✏️ 동일 출처 정책(Same-Origin Policy)
동일 출처 정책은 단어 그대로 '동일한 출처에서만 리소스를 공유할 수 있다.'라는 정책을 말합니다.
즉, 동일 출처 서버에 있는 리소스는 자유롭게 가져올수 있지만, 다른 출처 서버에 있는 이미지나 유튜브 영상 같은 리소스는 상호작용이 불가능 합니다.
동일 출처 정책이 필요한 이유는 다른 출처로부터의 공격을 예방할 수 있기 때문입니다.
만약 제약이 없다면 해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등의 방법을 이용해 우리가 만든 어플리케이션에서 해커가 심어놓은 코드가 실행되어 개인 정보를 가로챌 수 있습니다.
✏️ 브라우저에서 CORS 기본 동작
동일 출처를 비교하는 로직은 서버에 구현된 스펙이 아닌 브라우저에 구현된 스펙입니다. 그래서 서버의 응답 데이터는 멀쩡하지만 브라우저 단에서 응답을 분석하고 동일 출처가 아니면 받을수 없도록 차단을 하기 때문에 에러가 발생하게 됩니다.
브라우저의 CORS 기본 동작 방식은 아래와 같습니다.
- 클라이언트에서 HTTP 프로토콜 요청 헤더의 Origin 이라는 필드에 출처를 담아 전달
- 서버는 응답헤더에 Access-Control-Allow-Origin 이라는 필드를 추가하고 값으로 '이 리소스를 접근하는 것이 허용된 출처 url'을 클라이언트로 전달
- 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin 과 서버가 보내준 응답의 Access-Control-Allow-Origin 을 비교해본 후 차단할지 말지 결정
❗️ 에러 핸들링 방법
-
Chrome 확장 프로그램 이용
Chrome에서는 CORS 문제를 해결하기 위한 확장 프로그램을 제공해주는데, 'Allow CORS: Access-Control-Allow-Origin' 크롬 확장 프로그램을을 설치 해주면 됩니다. 해당 프로그램을 활성화 시키게 되면, 로컬(localhost) 환경에서 API 테스트 시, CORS 문제를 해결할 수 있습니다. -
프록시 사이트 이용
프록시(Proxy)란 클라이언트와 서버 사이의 중계 대리점이라고 보면 됩니다.
프론트에서 직접 서버에 리소스를 요청을 했더니 서버에서 따로 설정을 안해줘서 CORS 에러가 뜬다면, 모든 출처를 허용한 서버 대리점을 통해 요청을 하면 됩니다. 하지만 현재 무료 프록시 서버 대여 서비스들은 악용 사례 때문에 api 요청 횟수 제한을 두어 실전에서는 사용하기 무리입니다. 실전에서는 직접 프록시 서버를 구축해서 사용할 수 있습니다. -
서버에서 Access-Control-Allow-Origin 헤더 세팅
직접 서버에서 HTTP 헤더 설정을 통해 출처를 허용하게 설정하는 것이 가장 정석적인 해결책입니다. 각 서버의 문법에 맞게 HTTP 헤더를 추가해 주면 됩니다. CORS에 연관된 HTTP 헤더 값으로는 다음 종류가 있습니다. 이들을 모두 설정할 필요는 없습니다.
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참고자료
