화면 UI개발이나 State(데이터)로 로그인이나 이미지 업로드 등의 기능을 개발할때 프론트엔드 분야만알아서는 안되는 부분들이 있다. 프론트엔드가 알아야 하는 백엔드 질문들이 나오기 마련인데, 그 중 CORS 정책에 대해 정리해보려고 한다.

SOP vs CORS

SOP과 CORS는 모두 출처(Origin)을 어디까지 허용하는가? 에 대한 개념이다.

*출처(Origin)란? URL 구조에서 Protocol, Host, Port를 합친 것을 말한다. 브라우저 개발자 도구의 콘솔 창에 location.origin를 실행하면 출처를 확인할 수 있다.

SOP(Same-Origin Policy)

SOP정책은 동일 출처 정책으로 동일한 출처일때만 리소스를 공유할 수 있다는 규칙이다. 즉 네이버 브라우저에서 네이버 백엔드에 데이터 요청을 보낼 수는 있지만, 네이버 브라우저에서 다음 백엔드에는 요청을 보낼 수 없게 하는 정책이다.

하지만 개발을 할떄 OPEN API 같이 동일한 출처가 아니어도 공통된 데이터를 요청받고 개발을 해야하는 상황이 꽤나 있다. 그래서 이를 해결하기 위해 나온 정책이 CORS이다.

CORS(Cross-Origin Resource Sharing)

CORS 정책은 다른 출처(Origin)이어도 서버에서 CORS 정책을 YES 하면, 리소스를 받아올 수 있게 만든 정책이다. 즉 네이버 브라우저에서 다음 백엔드에 요청을 보내어 리소스를 받아올 수 있고, 다음 브라우저에서도 네이버 백엔드에 요청을 보내 리소스를 받아올 수 있는 정책이라고 생각하면 쉽다. 만약 서버에서 CORS 허용에 NO를 한다면 마찬가지로 브라우저는 데이터를 받아올 수 없다.

간략히 작동 방식에 대해 설명하자면 브라우저에서 백엔드로 API 요청을 할때 먼저 preflight요청을 보낸다. 이 요청에서 서버는 CORS 허용(YES)인지 NO인지 응답을 보낸다. 이때 만약 NO라고 미허용이 되어있다면 브라우저 자체에서 API 요청을 차단한다. 하지만 앱이나 다른 백엔드에서 요청을 할때는 CORS허용이 NO 되어있더라도 브라우저가 아니므로 자체 차단하지 않기 때문에 API요청을 하여 리소스를 받아올 수 있다.

WHY?

왜 이렇게 만들어 둔것일까? 이유는 간단하다. 브라우저에는 쿠키라는 것이 있다. 데이터를 저장할 수 있는 공간인데 브라우저 쿠키에 데이터가 저장되어있으면 API를 요청할때마다 무조건 쿠키가 백엔드에 첨부가 되고, 이는 보안상의 문제가 될 수 있기 때문에 브라우저 자체에서 차단하도록 만들어 둔 것이다.

그렇다면 만약 CORS 허용이 NO로 되어있는 서버에는 브라우저가 리소르를 절대 받자오지 못하는걸까?

해결방법

1. proxy server 를 사용한다 우선 프론트엔드에서 해결할 수 있는 방법으로는 대리서버(proxy server)를 사용하는 것이다. 위에 CORS 허용이 NO 되어있더라도, 모바일이나 백엔드에서는 브라우저 자체 차단이 되지 않으므로 데이터를 받아올 수 있다고 하였는데 이를 이용하여 대리 서버에서 요청을 보내고, 받아온 값을 그대로 전달 받아 데이터를 받아오는 방법이 있다.

2. 서버에서 Access-Control-Allow-Origin 헤더 세팅 가장 정석적인 해결방법으로 백엔드 서버에서 HTTP 헤더 설정을 통해 출처를 허용하게 설정해주면 된다. 요청받을 출처를 백엔드 서버에서 헤더로 넣어주면 해결된다.