CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 다른 도메인의 리소스에 접근할 수 있는 메커니즘을 제공합니다. 이를 통해 자바스크립트 코드에서 메인 도메인 외의 도메인에 있는 리소스에 접근할 수 있게 됩니다. 이 글에서는 CORS를 활용하여 자바스크립트에서 다른 도메인에 있는 리소스에 접근하는 방법을 알아보겠습니다.

CORS가 필요한 이유

기본적으로 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)를 따릅니다. 동일 출처 정책은 스크립트가 오직 동일한 출처에서만 리소스에 액세스할 수 있도록 제한합니다. 하지만 웹 애플리케이션에서는 다른 도메인에 있는 리소스에 접근해야 하는 경우가 많습니다. 이때 CORS를 사용하면 브라우저에서 동일 출처 정책을 우회할 수 있게 됩니다.

CORS 설정하기

서버 측에서는 Access-Control-Allow-Origin 헤더를 사용하여 CORS를 활성화할 수 있습니다. 이 헤더를 사용해 허용하려는 도메인을 명시합니다. 예를 들어, 메인 도메인이 “http://www.example.com”이고 다른 도메인인 “http://api.example.com”에 있는 리소스에 접근하고 싶다면, 서버는 다음과 같은 헤더를 반환해야 합니다.

Access-Control-Allow-Origin: http://www.example.com

이렇게 설정된 서버는 “http://www.example.com” 도메인에서 오는 요청을 허용하게 됩니다.

자바스크립트에서 다른 도메인의 리소스에 접근하기

자바스크립트에서 CORS를 사용해 다른 도메인의 리소스에 접근하는 방법은 매우 간단합니다. XMLHttpRequest 객체나 fetch API를 사용하여 요청을 보낼 때, 브라우저는 자동으로 CORS를 처리해줍니다.

fetch('http://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 리소스에 대한 작업 수행
  })
  .catch(error => {
    console.error('Error:', error);
  });

위 예제에서는 fetch API를 사용하여 “http://api.example.com/data”에 있는 리소스에 접근하고 있습니다. 이때 브라우저는 CORS 설정을 확인하고, 허용된 도메인에서 온 요청이라면 원하는 리소스에 접근할 수 있게 됩니다.

결론

CORS는 웹 애플리케이션에서 다른 도메인의 리소스에 접근하기 위한 핵심 기술입니다. 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하여 CORS를 활성화하고, 자바스크립트 코드에서는 fetch API나 XMLHttpRequest 객체를 사용하여 다른 도메인의 리소스에 접근할 수 있습니다.

CORS를 올바르게 처리하는 것은 웹 개발에서 중요한 부분이므로 반드시 이해하고 정확히 구현해야 합니다.

#CORS #웹개발