CORS를 활용하여 자바스크립트에서 다른 도메인의 협업 도구를 구현하는 방법에 대해 알아보세요.

12 Oct 2023

cors

현대 웹 애플리케이션은 다른 도메인의 리소스를 사용하는 경우가 많습니다. 하지만 보안 이슈로 인해 웹 브라우저는 Same-Origin Policy를 따르기 때문에 기본적으로 다른 도메인으로부터 리소스를 가져올 수 없습니다. 이러한 문제를 해결하기 위해 Cross-Origin Resource Sharing (CORS)라는 메커니즘이 도입되었습니다. CORS를 활용하면 자바스크립트를 사용하여 다른 도메인의 협업 도구를 구현할 수 있습니다.

CORS란?

CORS는 서버와 클라이언트 간의 도메인이 다른 경우에도 리소스를 공유할 수 있게 해주는 메커니즘입니다. 서버는 클라이언트 요청 헤더에 Access-Control-Allow-Origin 헤더를 포함하여 어떤 도메인에서의 요청을 허용할지 명시합니다. 클라이언트는 이 헤더를 확인하여 어떤 도메인으로부터의 리소스를 사용할 수 있는지 결정합니다.

CORS를 활용한 자바스크립트 구현 방법

다른 도메인의 리소스에 접근하기 위해 자바스크립트에서 CORS를 활용하는 방법은 다음과 같습니다:

서버 측에서 Access-Control-Allow-Origin 헤더를 설정합니다. 이 헤더에는 허용할 도메인을 지정합니다. “*“를 사용하면 모든 도메인의 요청을 허용할 수 있습니다. 예를 들어, PHP에서는 다음과 같이 설정할 수 있습니다:

header("Access-Control-Allow-Origin: *");

자바스크립트 코드에서 다른 도메인의 리소스를 요청합니다. 이 때, 요청하는 도메인에서는 XMLHttpRequest 객체의 withCredentials 속성을 true로 설정하여 인증 및 쿠키 정보를 포함한 요청을 보낼 수 있도록 해야 합니다. 예를 들어, 다음과 같이 Ajax 요청을 보낼 수 있습니다:

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open("GET", "http://example.com/api/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 리소스 사용
  }
};
xhr.send();

요약

CORS를 활용하여 자바스크립트에서 다른 도메인의 협업 도구를 구현하는 방법을 살펴보았습니다. 서버에서 Access-Control-Allow-Origin 헤더를 설정하고, 자바스크립트에서 withCredentials 속성을 true로 설정하여 요청을 보내면 다른 도메인의 리소스를 안전하게 사용할 수 있습니다. CORS를 올바르게 설정하면 다른 도메인과 협업하는 웹 애플리케이션을 신뢰할 수 있도록 보안성을 유지할 수 있습니다.

태그: CORS, 자바스크립트, 협업, 보안