자바스크립트에서 CORS를 통해 다른 도메인의 실시간 데이터 처리를 수행하는 방법에 대해 알아보세요.

12 Oct 2023

cors

인터넷의 발전으로 웹 애플리케이션은 다양한 도메인에서 호스팅되고 있습니다. 그러나 도메인 간 보안 정책 때문에 클라이언트 측에서 어떤 도메인의 데이터에 접근해야 할 때 문제가 발생할 수 있습니다. 이 때, CORS는 서버와 클라이언트 간에 통신할 수 있도록 해주는 정책입니다.

CORS란 무엇인가요?

CORS는 브라우저의 동일 출처 정책(Same-Origin Policy)를 우회하고, 다른 도메인의 리소스에 접근할 수 있도록 도와주는 메커니즘입니다. 기본적으로 JavaScript에서는 동일한 출처에서만 리소스에 접근할 수 있습니다. 출처는 프로토콜 (http, https), 호스트 (domain.com), 포트 (80, 443)로 구성됩니다.

CORS는 서버 측에서 설정해 주어야 하며, 요청하는 측의 도메인(origin)을 확인하여 허용하거나 거부하는 방식으로 작동합니다. 클라이언트는 서버 응답의 헤더에 Access-Control-Allow-Origin 값을 확인하여 허용된 도메인인지 확인하고, 허용된 경우에만 응답을 받을 수 있습니다.

CORS 설정 방법

서버 사이드 설정: 서버에서 CORS를 허용하도록 설정해야 합니다. 대부분의 서버 언어에서는 이를 위한 미들웨어 또는 헤더 설정 옵션을 제공합니다.
클라이언트 사이드 설정: XMLHttpRequest나 Fetch API를 사용하여 서버와 통신할 때, 요청 헤더에 해당 도메인(origin)을 포함하여 보내야 합니다. 이를 사용하는 경우, 사용하려는 API가 CORS를 지원해야 합니다.

아래는 JavaScript로 CORS를 사용하는 예시 코드입니다.

const url = 'http://api.example.com/data';

// 서버에 GET 요청할 때, CORS 헤더에 origin 포함
fetch(url, {
  method: 'GET',
  headers: {
    'Origin': 'http://your-domain.com' // 요청하는 도메인
  }
})
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직
  })
  .catch(error => console.error(error));

위의 코드에서는 fetch 함수를 사용하여 서버에 GET 요청을 보내고 있습니다. 요청 헤더에 ‘Origin’ 값을 설정하여 CORS를 허용한 도메인인지 서버에서 확인합니다. 응답 받은 데이터는 .json() 메소드를 통해 처리할 수 있습니다.

참고 자료

MDN 웹 문서 - CORS

CORS를 활용하여 다른 도메인의 실시간 데이터 처리를 수행하는 방법에 대해 알아보았습니다. 서버와 클라이언트 간에 CORS를 올바르게 설정하면 보안 정책을 우회하여 데이터를 주고받을 수 있습니다. 그러나 보안을 위해 신중한 설정이 필요하며, 서버 측에서도 CORS를 허용하도록 설정해줘야 합니다.