CORS 요약

CORS 관련 많은 정보들이 있지만 요점만 정리를 해 둘 필요가 있어 보여 기록해 둔다.

CORS 란?

Cross Origin Resource Sharing 로 해석해 보면 다른 origin 사이에 자원을 공유 한다 임을 알 수 있다. 그러면 제일 먼저 origin 이 무엇인지 정의 해 볼 필요가 있어 보인다

Origin 이란?

아래 그림을 참고해서 URL을 구성하는 각 부분 명칭을 알아보면, 

맨 앞을 스키마 혹은 프로토콜이라 부르고, 도메인이 들어간 부분을 호스트, 맨 뒤 숫자를 포트번호라 칭한다. Origin이란 이 세개를 전부 포함한 개념이다.

Origin = scheme + host + port

그러므로 Cross Origin이란 두 Origin 간에 이 세개 중 하나라도 다르면 Cross Origin이 된다는 것을 알 수 있다. 예를 들어 보면, 

* host가 달라 Cross Origin

http://www.example.com:9000

http:///example.com:9000

* port가 달라 Cross Origin

http://www.example.com:9000

http://www.example.com:9001

* scheme가 달라 Cross Origin

http://www.example.com:9000

https://www.example.com:9000

CORS 에러의 주체는?

Origin과 Cross Origin에 대해 정의는 되었고 다음으로 CORS 에러에 대해 알아 보자.

CORS 에러는 서버가 내는 에러가 아니다. 그렇다고 클라이언트가 내는 에러도 아니다. CORS 에러는 브라우저가 내는 에러이다(CORS 에러 나는 REST API로 curl 호출해보면 잘 동작하는 것을 알 수 있다). 브라우저의 기본 정책이 Same Origin Policy 로 동작하기 때문이다.

CORS를 허용하려면?

브라우져에서 CORS를 허용할 수 있도록 서버에서 허용할 Origin 값을 Access-Control-Allow-Origin 헤더로 내려 주면 된다. 서버 종류는 다양하니(Spring Boot, Node.js 등등) 헤더 셋팅 방법은 자신의 서버에 맞는 걸로 구글링 해보면 많이 나오니 이건 패쓰.

실전 CORS 예

요청 URL과 Origin이 다르면,

CORS 에러가 난다.