[typescript] 타입스크립트에서 서버에서 보내는 응답이 CORS 응답인지 확인하는 방법

11 Dec 2023

typescript

크로스 오리진 리소스 공유(CORS)는 웹 애플리케이션이 다른 도메인, 포트 또는 프로토콜에서 리소스에 접근할 수 있는 권한을 부여하는 보안 기능입니다.

웹 애플리케이션이나 API를 개발하다 보면, 서버에서 반환된 응답이 CORS 정책에 따라 허용 또는 거부되는지 확인해야 하는 경우가 있습니다.

여기에서는 타입스크립트에서 서버 응답이 CORS 응답인지 확인하는 방법에 대해 알아보겠습니다.

XMLHttpRequest를 이용한 CORS 확인

function checkCors(url: string) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 0) {
        console.log('CORS 확인: 응답이 CORS 불일치');
      } else {
        console.log('CORS 확인: 응답이 CORS 일치');
      }
    }
  };
  xhr.send();
}

위의 예제는 XMLHttpRequest를 이용하여 서버에 GET 요청을 보내고, 응답을 통해 CORS 정책을 확인하는 방법을 보여줍니다.

서버의 응답이 CORS에 의해 차단되면, xhr.status 값은 0이 됩니다.

Fetch API를 이용한 CORS 확인

function checkCors(url: string) {
  fetch(url)
    .then(response => {
      if (!response.ok) {
        console.log('CORS 확인: 응답이 CORS 불일치');
      } else {
        console.log('CORS 확인: 응답이 CORS 일치');
      }
    })
    .catch(error => console.error('Error:', error));
}

또 다른 방법으로, Fetch API를 사용하여 서버에 GET 요청을 보내고, 응답을 통해 CORS 정책을 확인할 수 있습니다.

Fetch API는 Promise 기반으로 동작하기 때문에, then 및 catch를 사용하여 응답의 상태를 확인할 수 있습니다.

핵심 포인트

서버 응답이 CORS 정책에 따라 차단되는지 확인하는 방법에 대해 알아보았습니다. 검증을 위한 방법으로는 XMLHttpRequest 및 Fetch API를 사용할 수 있으며, 각각의 방법은 프로젝트의 요구에 따라 선택하여 활용할 수 있습니다.

서버 응답 CORS 확인을 통해 웹 애플리케이션의 보안성을 강화하고, 안정적인 데이터 통신을 보장할 수 있습니다.

이를 통해 웹 애플리케이션 개발 시 CORS 정책에 대한 이해도를 높이고, 안전한 통신 환경을 조성할 수 있습니다.

XMLHttpRequest를 이용한 CORS 확인

Fetch API를 이용한 CORS 확인

핵심 포인트

참고 자료