서버란?
서버는 클라이언트에게 네트워크를 통해서 정보나 서비스를 제공하는 컴퓨터 또는 컴퓨터 프로그램이다.
즉, 사용자(클라이언트)의 요청에 대한 응답을 넘겨주는 역할을 한다.
웹에서 서버는 어떻게 동작할까?
웹 서버
웹 서버는 HTTP를 통해서 웹 브라우저에서 요청하는 HTML 문서나 이미지 파일 등을 전송해주는 프로그램이다.
즉 웹에서는 요청을 브라우저가 서버에게 보내므로 브라우저는 클라이언트가 된다.
- 웹에서 브라우저는 클라이언트다.
- 서버는 HTML등과 같은 리소스를 보낸다.
그렇다면 프론트 서버와 백엔드 서버로 서버가 나누어 지는 이유는 무엇일까?
그 이유는 두 종류의 서버가 제공해주는 정보나 서비스가 다르기 때문이다.
프론트 서버
프론트 서버는 브라우저가 주소창의 url로 요청을 보냈을 경우에, html, css, js 파일을 보내준다. 즉 사용자에게 GUI 환경을 제공해주는 서버이다.
백엔드 서버
백엔드 서버는 브라우저가 프론트 서버로부터 받아온 Java Script를 실행했을 때, XMLHttpRequest 등과 같은 비동기 통신으로 데이터 요청을 보냈을 때 정보를 보내는 서버이다.
(이 설명은 CSR과 밀접하다. SSR같은 경우엔 해당하지 않을 수 있다.)
CORS(Cross Origin Resource Sharing) 에러
먼저 CORS 에러를 설명하기 전에 SOP에 대해서 알아야 한다.
SOP(Same Origin Policy)
동일 출처 정책(SOP)란 MDN에 따르면 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용 하는 것을 제한하는 보안 방식이다. 예시를 들어 SOP에 대해 알아보자.
-
브라우저가 domain-a.com에 접속하려고 한다.
-
브라우저는 사용자가 주소창에 url을 작성해서 전송하면, 프론트 서버에게 GET방식으로 초기 렌더링에 필요한
html,css,js리소스를 요청한다.
-
브라우저가 domain-a.com에서 받은 JS 코드를 실행하는 과정에서, Ajax 방식으로 비동기적으로 domain-b.com에서 리소스를 요청하려고 한다.
이때, SOP 정책에 의하면 초기에 domain-a.com에서 받아온 JS가 domain-a.com와는 다른 출처인 domain-b.com에서 리소스를 요청하려고 하니, SOP를 위반한게 된다.
브라우저는 기존의 출처와 다른 출처에게 요청하는 사실을 감지하고, CORS에러를 발생시킨다.
그렇다면 왜 SOP에러가 아니라 CORS에러인 것일까?
CORS(Cross Origin Resource Sharing)
교차 출처 리소스 공유(CORS)는 MDN에 따르면 SOP 위반이 발생하더라도, 즉 서로 다른 출처에서 리소스 요청이 들어오더라도 그를 허락하여 서로 통신할 수 있는 권한을 부여하도록 브라우저에게 알리는 체제이다.
브라우저에서 SOP정책에 어긋난다는 사실을 감지했지만, 사실 초기 렌더링을 위한 파일들을 제공하는 프론트 서버와 이후에 추가적인 데이터를 제공해주는 백엔드 서버가 다른 경우가 상당히 빈번하다.
따라서 다른 출처에서 리소스 요청을 허락하도록 CORS를 지정하여 브라우저에서 요청을 보낼 수 있도록 한다.
따라서 CORS 에러는, 서로 다른 출처에서 리소스를 요청할 때(이미 SOP는 위반했음), 백엔드 서버에서 '아~ 그 출처는 프론트 서버여서 신뢰할 수 있어~ 보내도 돼~'라는 의미의 CORS를 허락받아와! 라는 의미에서 발생시키는 에러이다.
CORS 에러를 해결하는 방법
- 공부가 필요하다. (추가 예정)
참고 자료
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy
https://velog.io/@kimtaeeeny/웹에서의-프론트-서버-백엔드-서버-개념-네트워크-study6
