A. 보통 '교차 출처 리소스 공유'로 번역되며, 브라우저로 웹 애플리케이션에 접속했을 때 리소스(이미지, JSON 등)가 자신의 출처(Origin)와 다름에도 가져오는 경우를 뜻한다.
여기서 출처(Origin)는 도메인, 프로토콜, 포트를 뜻한다. 도메인, 프로토콜, 포트 중 하나라도 다르면 출처가 다른 것이다. 브라우저가 CORS 허용 여부를 확인하며, 확인된 경우 출처가 다른 곳에서 리소스를 가져와서 보여준다. 허용되지 않은 경우는 CORS 에러가 발생한다.
어디서 이슈가 발생할까?
브라우저에서만 발생한다. 브라우저가 CORS 허용 여부를 확인하기 때문이다. Android 앱이나 iOS 앱과는 관계 없다.
언제 이슈가 발생할까?
예를 들어 https://www.taptorestart.com 에 브라우저로 접속했다. www.taptorestart.com의 도메인은 www.taptorestart.com이고, 프로토콜은 https이고, 포트는 80이다. https://www.taptorestart.com/images/background.png란 리소스에 접근하는 것은 교차 출처Cross-Origin가 아니다. 본인 출처Origin 자기 것을 그냥 가져오는 것이다. 이런 경우가 아니라 자바스크립트 코드로 다른 도메인 예를 들어 google.com 에서 image나 JSON 응답을 요청하는 경우를 생각해보자. 이 경우 출처Origin가 다르다. 이때 CORS 이슈가 발생한다.
웹 애플리케이션을 실행하고 해당 페이지에서 자바스크립트로 google.com 리소스 접근을 시도하면 아래처럼 'blocked by CORS policy'란 오류를 접하게 된다. (관련 코드: CORS Test using Flask)
어떻게 보면 google.com 입장에서는 당연히 차단해야 한다. 엉뚱한 사이트에서 google.com에 접근하는 것이니까 말이다.
프런트 웹 서버와 API 서버가 분리된 경우
요즘처럼 React로 프런트 웹 애플리케이션을 만들고, API 서버를 따로 두는 경우에 문제가 발생한다. 프런트 주소는 www.taptorestart.com 인데, API 서버 주소는 api.taptorestart.com 이라면 서로 도메인이 다르기 때문이다. 이때 API 서버에서 www.taptorestart.com에 대한 CORS 허용을 해줘야 프런트 웹 애플리케이션에서 API 서버에 접근할 수 있다.
CORS 허용 방법은 NGINX 등 웹 서버마다 다르다. 사용 중인 웹 서버 관련 문서를 살펴봐야 한다.