웹 애플리케이션을 개발할 때 종종 다른 도메인의 서비스를 활용해야 할 때가 있습니다. 이 경우, 보안 상의 이유로 브라우저에서는 Cross-Origin Resource Sharing (CORS) 정책을 적용하여 도메인 간 요청을 제한합니다. 하지만, 이러한 제한을 우회하고 다른 도메인의 전자 서명 서비스를 사용하는 방법에 대해 알아보겠습니다.

1. XMLHttpRequest 사용

가장 기본적인 방법은 XMLHttpRequest 객체를 사용하여 CORS를 통해 다른 도메인의 서비스에 요청을 보내는 것입니다. 다음은 이를 구현하는 예시코드입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://external-domain.com/sign-service', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 서비스 응답 처리
  }
};
xhr.send();

위 코드에서는 xhr.open 메서드를 사용하여 서비스의 엔드포인트 주소를 지정하고, xhr.onreadystatechange 함수를 통해 응답을 처리합니다. 이렇게 요청을 보내면 서비스로부터 받은 응답 데이터를 활용할 수 있습니다.

2. Fetch API 사용

XMLHttpRequest 대신 Fetch API를 사용하는 것도 가능합니다. Fetch API는 XMLHttpRequest보다 좀 더 간단하고 직관적인 인터페이스를 제공합니다. 다음은 Fetch API를 사용한 예시 코드입니다.

fetch('https://external-domain.com/sign-service')
  .then(function(response) {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(function(data) {
    // 서비스 응답 처리
  })
  .catch(function(error) {
    // 에러 처리
  });

위 코드에서는 fetch 함수를 사용하여 서비스에 GET 요청을 보내고, then 메서드를 이용하여 응답 데이터를 처리합니다. 에러 발생시에는 catch 메서드를 통해 에러를 처리할 수 있습니다.

결론

CORS를 통해 다른 도메인의 전자 서명 서비스를 사용하는 방법을 알아보았습니다. 위에서 소개한 두 가지 방법은 모두 Javascript를 사용하여 타 도메인의 서비스에 요청을 보내고, 응답을 처리하는 기본적인 방법입니다. 이를 활용하여 안전하게 다른 도메인의 전자 서명 서비스를 활용할 수 있습니다.

자세한 내용에 대해서는 공식 Mozilla CORS 문서를 참고하시기 바랍니다.

#webdevelopment #javascript