웹 개발을 하다보면 크로스 도메인 이슈가 꼭 한 번은 발생하게 되죠.

이 이슈는 무엇이고 어떻게 해결하는지 알아봅시다.

먼저 웹 개발에서 다른 도메인 간의 리소스 공유와 관련된 두 가지 개념인 크로스 도메인(Cross-Domain)과 CORS(Cross-Origin Resource Sharing) 에 대해서 알아보도록 하죠.

크로스 도메인(Cross Domain)

크로스 도메인의 정의는 '서로 다른 도메인(Domain) 간의 호출'입니다.

만약, 제가 개발한 웹 사이트에서만 사용하기 위해서 API 서버를 구축하였는데, 다른 웹 서비스에서 이 API 서버에 마음대로 접근하여 API를 호출하여 사용한다면 보안상 큰 문제가 되어 이를 차단합니다.

그래서 Javascript는 Same Origin Policy(동일한 출처 정책)을 두어 다른 도메인 서버에 요청(Request) 하는 것을 차단합니다.

다시 말해 Javascript는 동일한 도메인 내에서만 서버 요청을 허용한다는 것입니다.

이러한 크로스 도메인 이슈는 아래와 같이 A, B 페이지 간에 통신을 하려고 할 때 발생할 수 있습니다.

  1. 도메인이 다른 경우
  2. 메인 도메인은 같지만 서브 도메인이 다른 경우
  3. 포트 번호가 서로 다른 경우
  4. 프로토콜이 상이한 경우