자바스크립트 브라우저에서 CORS 이해하기

CORS란 무엇인가?

CORS(Cross-Origin Resource Sharing)은 다른 도메인으로부터 리소스 요청을 허용하기 위한 보안 메커니즘입니다. 기본적으로 브라우저는 같은 도메인에서만 리소스를 요청할 수 있습니다. 그러나 이 외부 도메인에서 리소스를 요청하려면 CORS를 설정해야 합니다.

CORS 설정 방법

CORS를 설정하기 위해서는 서버 측에서 응답 헤더를 지정해주어야 합니다.

// 예시
res.setHeader('Access-Control-Allow-Origin', 'http://example.com');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

위의 코드에서 `Access-Control-Allow-Origin` 헤더는 요청을 허용할 도메인을 지정합니다. `Access-Control-Allow-Headers` 헤더는 요청에 포함될 수 있는 헤더를 지정합니다.

JavaScript에서 CORS 처리하기

JavaScript에서 클라이언트 측에서 CORS를 처리하는 방법은 다음과 같습니다.

// XMLHttpRequest를 사용한 예시
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data');
xhr.withCredentials = true; // 쿠키 교환 가능 설정
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

위의 코드에서 `xhr.withCredentials`는 쿠키를 교환할 수 있도록 설정하는 옵션입니다. XMLHttpRequest 외에도 `fetch` API를 사용하여 CORS 요청을 보낼 수 있습니다.

결론

CORS는 다른 도메인으로부터 리소스 요청을 보호하기 위한 보안 메커니즘입니다. 서버측에서 응답 헤더를 설정하여 클라이언트측에서 CORS 요청을 처리할 수 있습니다.

Keywords: 자바스크립트, 브라우저, CORS, 보안 메커니즘, 외부 도메인, 요청 처리