(HTTP) Server(Backend) 측면에서 CORS (Cross-Origin Resource Sharing). 교차 출처 자원 공유

Cors는 HTTP 헤더를 사용하여 특정 Origin에서 자원을 받아서 실행 중인 웹 애플리케이션이 다른 origin(domain, scheme, port)에서 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체계이다. 웹 애플리케이션은 preflight시에 자원이 자신의 origin과 다를 때 Cors HTTP 요청을 하게 된다.

 

JS의 통신에서 XMLHttpRequest 객체나 fetch API는 same-origin 정책을 따르기 때문에 웹 애플리케이션은 자신의 origin과 동일한 origin의 자원만 요청할 수 있다. 만일 다른 origin에서 자원을 요청하려면 요청 받은 다른 origin에서 올바른 Cors 헤더를 포함한 응답을 반환해야 한다. 이는 브라우저가 자발적으로 브라우저의 애플리케이션을 보호하기 위한 정책이다.

 

Cors 설정시에 구별해야 할 부분이 1) client 영역에서 설정  2) server 영역에서 설정.

위에 기재한 Cors의 정의 또한 클라이언트 관점에서의 기술이고 Cors에 대한 정보를 찾아보면 대부분이 클라이언트에서 서버로 리소스를 요청했을 때 Cors 에러가 난다는 식이다. 

 

그렇기 때문에 우리는 클라이언트에서 요청하는 다른 origin의 리스트를 클라이언트의 어딘가에 넣어야 한다는 착각을 할 수 있다.(실제 나의 경우 Cors의 정의만 보았을 때 동일한 착각을 하였다)

 

결론적으로 Cors의 설정은 서버에서 해주는 방식이다.

즉 클라이언트 입장에서 Cross-origin이겠지만 서로 다른 origin에서는 요청을 하는 클라이언트의 도메인을 자신의 서버 코드 어딘가에 whiteList라는 변수명을 설정하여 담아주는 방식으로 cross-origin의 요청에 대응을 하는 방식이다.

 

아래는 express.js 프레임워크에서 1개의 클라이언트에 대해서 https method와 origin 등 Cors 옵션 설정을 서버에서 해준 것이다.

이외에도 다양한 구현 방법이 있다.

 

참고자료

그릿속의 해빗님 자료 https://loosie.tistory.com/114

keyhnote님 자료 https://handhand.tistory.com/35