현대 웹 애플리케이션에서는 다른 도메인의 리소스에 접근하는 것이 많은 경우에 필요합니다. 이는 보안 상의 이유로 브라우저에서 기본적으로 차단되어 있습니다. 하지만 CORS(Cross-Origin Resource Sharing) 기능을 활용하면 다른 도메인 간의 통신을 안전하게 수행할 수 있습니다.

CORS란 무엇인가요?

CORS는 브라우저에서 도메인 간 요청을 허용하는 메커니즘입니다. 이를 통해 서버는 특정 HTTP 헤더를 포함한 응답을 반환함으로써 브라우저가 애플리케이션에서의 리소스 접근을 허용할 수 있습니다.

자바스크립트에서 CORS를 활용한 도메인 간 통신 방법

1. 클라이언트 측에서 요청하는 도메인에 서버에서 CORS 요청을 허용하는 헤더를 포함시켜야 합니다.
   • 서버 응답 헤더에는 Access-Control-Allow-Origin 헤더를 설정하여 요청을 허용할 도메인을 명시해야 합니다. 예를 들어, 모든 도메인을 허용하려면 아래와 같이 설정합니다:

     Access-Control-Allow-Origin: *
     

2. 자바스크립트에서 요청을 보낼 때, 요청 헤더에 Origin 헤더를 포함시켜야 합니다.
   • Origin 헤더는 현재 페이지의 도메인을 나타내는 값입니다. 이를 통해 서버는 요청이 어떤 도메인으로부터 온 것인지 확인할 수 있습니다.
3. 서버에서는 요청을 받아 처리 후, 허용된 도메인에서 온 요청인 경우 응답 헤더에 Access-Control-Allow-Origin 헤더로 해당 도메인을 포함시켜야 합니다.

아래는 자바스크립트에서 CORS 요청을 보내는 예제 코드입니다. 게임 서버와의 통신을 목적으로 GET 요청을 보내는 경우를 가정합니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://game-server.com/api/data', true);
xhr.setRequestHeader('Origin', 'https://your-website.com');
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            // 요청이 성공적으로 완료되었습니다.
            var response = xhr.responseText;
            // 데이터를 활용할 코드 작성
        } else {
            // 요청이 실패하였습니다.
            console.error('요청에 실패했습니다.');
        }
    }
};
xhr.send();

위 예제에서 ‘https://game-server.com/api/data’ URL은 게임 서버의 API 엔드포인트를 가정한 것이며, ‘https://your-website.com’은 자신의 웹사이트 도메인입니다.

이와 같이 CORS를 활용하면 자바스크립트를 사용하여 다른 도메인의 게임 서버와 통신할 수 있습니다. 그러나 보안 상의 이유로 모든 도메인을 허용하는 것은 권장되지 않으며, 요청 허용 정책을 서버에 맞게 설정하는 것이 중요합니다.

좋은 결과를 얻기 위해 CORS에 대한 공식 문서와 서버의 설정에 대해 더 자세히 알아보시기 바랍니다.

#CORS #자바스크립트