CORS이란?

API로 정보를 받아오기 위해 프론트에서 HTTP 요청을 보냈을 때 미리 어떤 설정을 해주지 않으면 CORS 문제로 막히게 된다.

 

Postman으로 요청을 보내거나 스프링 같은 백엔드에서 HTTP 요청을 보내면 되는데, 웹 사이트에서 AJAX 요청을 보냈을 때는 안된다. 브라우저에서 일어나는 문제이다.

 

CORS란 이유로 요청을 막는건 브라우저 쪽이다. CORS는 어떤 사이트에서 다른 사이트로는 요청이 못 가게끔 막는 것이 아니라 풀어주는 역할을 한다. 요청을 막는 역할을 하는게 SOP(Same-Origin Policy)이다. 

 

CORS(Cross-Origin Resource Sharing)은 SOP의 반대 개념이고 다른 출처간에 리소스를 공유할 수 있도록 하는 것이다.

기존에는 서로 다른 URL인 요청에 대해서 거부하는게 기본이었고, JSONP 등의 방식으로 우회하는 꼼수를 부리곤 했다.

 

합의된 출처들간에 합법적으로 허용해주기 위해 어떤 기준을 충족시키면 리소스 공유가 되도록 만들어진 메커니즘이 CORS이다.

 

 

그 조건이란 요청을 받는 백엔드쪽에서 이걸 허락할 다른 출처들을 미리 명시해두면 된다.

CORS 옵션을 넣는 방법은 많이 나와있다고 한다.

 

네이버 지도 API 등의 서비스들도 콘솔에 들어가보면 CORS를 허용해줄 주소들을 지정하는 페이지가 있을거다.

 

브라우저는 이처럼 다른 출처끼리의 요청이 보내질 때는 요청에 Origin 이라는 header를 추가한다.

이 요청을 받은 네이버 지도 API 서버는 답장의 헤더에 지정된 Access-Control-Allow-Origin 정보를 실어서 응답한다.

 

Origin에서 보낸 출처값이 서버의 답장 헤더에 담긴 Access-Control-Allow-Origin에 똑같이 있으면 안전한 요청으로 간주하고 응답 데이터를 받아오게 된다.

 

그리고 토근 등 사용자 식별 정보가 담긴 요청에 대해서는 보다 엄격하다.

보내는 측에서는 요청의 옵션에 credentials 항목을 true로 세팅을 하고 받는쪽에서도 보내는 쪽의 출처 - 웹페지 주소를 정확히 명시한 다음 Access-Control-Allow-Credentials 항목을 true 맞춰줘야한다.

 

위의 방식은 Simple request라고 해서 GET과 POST 등 일정 조건의 요청들에 사용된다.

PUT이나 DELETE등은 본 요청을 보내기 전에 Preflight 요청이란 것을 먼저 보내서 본 요청이 안전한지 확인하고 여기서 허락이 떨어져야 본격적으로 요청을 보낼 수 있다.

 

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

 

위의 문서를 확인하면 자세하게 CORS 대해서 학습할 수 있다.