CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 다른 도메인에서 리소스를 요청할 수 있는 메커니즘입니다. 일반적으로는 브라우저 보안 정책으로 인해 동일 출처 정책(Same-Origin Policy)에 의해 제한되는 경우가 많습니다.

다행히도, 자바스크립트 프레임워크에서는 CORS를 지원하기 위한 다양한 방법들이 존재합니다. 이 글에서는 몇 가지 일반적인 방법을 살펴보겠습니다.

1. XMLHttpRequest 객체 사용하기

XMLHttpRequest 객체는 가장 기본적인 방법으로, 많은 자바스크립트 프레임워크에서 이 객체를 이용하여 AJAX 요청을 수행합니다. CORS를 지원하기 위해서는 다음과 같은 설정이 필요합니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://다른도메인.com/api/data', true); // 요청 주소 설정
xhr.withCredentials = true; // 쿠키 포함 여부
xhr.setRequestHeader('Content-Type', 'application/json'); // 요청 헤더 설정
xhr.onload = function() {
  if (xhr.status === 200) {
    // 요청이 성공한 경우에 대한 처리
  } else {
    // 요청이 실패한 경우에 대한 처리
  }
};
xhr.send();

위 코드에서 xhr.withCredentials 속성을 true로 설정하면, 브라우저는 요청에 쿠키를 포함하여 서버에게 전송합니다. 이렇게 함으로써 다른 도메인에서 요청을 보내더라도 인증된 사용자로 간주될 수 있습니다.

2. Fetch API 사용하기

Fetch API는 XMLHttpRequest보다 더 직관적이고 간단한 인터페이스를 제공합니다. CORS를 지원하기 위해서는 다음과 같은 설정이 필요합니다.

fetch('http://다른도메인.com/api/data', {
  method: 'GET', // HTTP 요청 방식 설정
  credentials: 'include', // 쿠키 포함 여부
  headers: {
    'Content-Type': 'application/json' // 요청 헤더 설정
  }
})
.then(response => {
  if (response.ok) {
    // 응답이 성공한 경우에 대한 처리
  } else {
    // 응답이 실패한 경우에 대한 처리
  }
})
.catch(error => {
  // 에러 처리
});

위 코드에서 credentials 옵션을 include로 설정하면, 브라우저는 요청에 쿠키를 포함하여 서버에게 전송합니다. 이렇게 함으로써 CORS를 지원하면서도 인증된 사용자로 간주될 수 있습니다.

3. 자바스크립트 라이브러리 사용하기

많은 자바스크립트 프레임워크 및 라이브러리는 CORS를 지원하기 위한 특별한 메서드나 설정 옵션을 제공합니다. 예를 들어, jQuery에서는 $.ajax() 메서드에서 crossDomain 옵션을 설정하여 CORS를 활성화할 수 있습니다.

$.ajax({
  url: 'http://다른도메인.com/api/data',
  type: 'GET', // HTTP 요청 방식 설정
  xhrFields: {
    withCredentials: true // 쿠키 포함 여부
  },
  headers: {
    'Content-Type': 'application/json' // 요청 헤더 설정
  },
  success: function(data) {
    // 요청이 성공한 경우에 대한 처리
  },
  error: function(xhr, status, error) {
    // 요청이 실패한 경우에 대한 처리
  }
});

각 프레임워크 또는 라이브러리에서는 공식 문서를 참조하여 CORS 지원 방법에 대한 자세한 내용을 확인할 수 있습니다.

요약

위에서 언급한 방법들은 자바스크립트 프레임워크에서 CORS를 지원하기 위한 일반적인 방법입니다. XMLHttpRequest, Fetch API, 다양한 자바스크립트 라이브러리를 사용하여 CORS를 적용할 수 있습니다. 프로젝트에 맞는 방법을 선택하여 다른 도메인에서 리소스를 요청하고 처리할 수 있습니다.

#CORS #자바스크립트