웹 애플리케이션을 개발하다보면 다른 도메인에서 제공하는 데이터에 접근해야하는 경우가 많습니다. 이때, 자바스크립트에서는 보안 상의 이유로 동일 출처 정책(Same-origin policy)에 의해 다른 도메인으로의 데이터 요청이 제한됩니다. 이런 경우, CORS(Cross-Origin Resource Sharing)를 사용하여 다른 도메인과의 데이터 통신을 허용할 수 있습니다.

CORS란?

CORS는 웹 브라우저에서 다른 도메인 간의 자원 공유를 허용하기 위한 메커니즘입니다. 이를 통해 자바스크립트 애플리케이션은 서로 다른 도메인으로부터 리소스를 요청하고 응답받을 수 있습니다. CORS를 사용하려면 서버 측에서 특정 헤더를 설정해야 합니다.

CORS를 사용하여 데이터 요청하기

자바스크립트에서 CORS를 사용하여 다른 도메인으로부터 데이터를 요청하는 방법은 아래와 같습니다.

1. XMLHttpRequest 객체를 사용하여 서버에 데이터를 요청합니다.

   var xhr = new XMLHttpRequest();
   xhr.open('GET', 'http://api.example.com/data', true);
   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 데이터를 사용하는 코드 작성
     }
   };
   xhr.send();
   

2. 서버에서는 요청을 받아들이고 응답에 CORS 관련 헤더를 설정합니다. CORS 관련 헤더는 다음과 같습니다.

   Access-Control-Allow-Origin: *
   

   위의 헤더는 모든 도메인에서 데이터 요청을 허용하는 의미입니다. 특정 도메인만 데이터 요청을 허용하려면 해당 도메인을 지정하면 됩니다.

3. 서버로부터 받은 응답을 자바스크립트에서 사용합니다. 이때, 서버가 허용한 도메인에서만 응답을 받을 수 있습니다.

요약

CORS를 활용하여 자바스크립트에서 다른 도메인으로부터 데이터를 요청하는 방법을 알아보았습니다. CORS를 사용하면 웹 애플리케이션에서 다양한 도메인으로부터 데이터를 효율적으로 가져올 수 있습니다. 주의할 점은 서버 측에서 CORS 관련 헤더를 설정해줘야 한다는 것입니다.