CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 동일 출처 정책(Same Origin Policy)을 우회하여 다른 도메인의 리소스에 접근할 수 있도록 허용하는 메커니즘입니다. 하지만, 일부 서버는 CORS를 허용하지 않아 다른 도메인의 서버에 요청을 보낼 때 문제가 발생할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 CORS를 허용하지 않는 서버로 요청을 보내는 방법에 대해 알아보겠습니다.

1. JSONP (JSON with Padding)

JSONP는 CORS를 우회하기 위한 전통적인 방법 중 하나입니다. 다른 도메인의 서버에 요청을 보내는 대신, 동적 스크립트 태그를 생성하여 응답을 받아옵니다. 서버는 JSON 데이터를 함수 호출과 함께 응답해야 합니다.

function handleResponse(data) {
   // 응답 데이터 처리
}

const script = document.createElement('script');
script.src = 'https://other-domain.com/api?callback=handleResponse';
document.head.appendChild(script);

위의 예시에서는 handleResponse 이름의 콜백 함수를 정의하고, 동적으로 생성한 스크립트 태그의 src 속성에 요청 URL을 지정합니다. 이때, 요청 URL에는 callback 매개변수로 콜백 함수의 이름을 전달해야 합니다.

2. 서버 측 프록시 사용

CORS를 허용하지 않는 서버로 직접 요청을 보내는 대신, 동일한 도메인의 서버를 통해 요청을 전달하는 방법도 있습니다. 이를 위해서는 동일한 도메인의 서버에 프록시 엔드포인트를 구현해야 합니다. 자바스크립트에서는 해당 프록시 엔드포인트로 요청을 보내면, 서버 측에서 다른 도메인의 서버로 재전송하여 응답을 받아오게 됩니다.

fetch('/proxy?url=https://other-domain.com/api')
   .then(response => response.json())
   .then(data => {
      // 응답 데이터 처리
   })
   .catch(error => {
      // 오류 처리
   });

위의 예시에서는 fetch 함수를 사용하여 동일한 도메인의 프록시 엔드포인트로 요청을 보냅니다. 프록시는 이 요청을 받아 다른 도메인의 서버로 전달하고, 응답을 받아 다시 클라이언트에게 전달합니다. 클라이언트는 이를 받아 응답 데이터를 처리할 수 있습니다.

결론

CORS를 허용하지 않는 서버로 요청을 보내는 방법에는 JSONP와 서버 측 프록시 사용이 있습니다. JSONP는 간단하게 구현할 수 있지만, 서버의 지원이 필요하며 보안성에 취약할 수 있습니다. 반면, 서버 측 프록시는 안전하고 다양한 기능을 구현할 수 있지만, 서버에서 프록시 엔드포인트를 작성해야 하는 번거로움이 있습니다. 상황에 맞게 알맞은 방법을 선택하여 CORS 문제를 해결할 수 있습니다.

#CORS #JSONP #프록시