CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 동일 출처 정책(Same-Origin Policy)을 우회하여 다른 도메인의 자원을 요청할 수 있는 기술입니다. 이를 통해 웹 애플리케이션은 다른 도메인의 API를 호출하거나 외부 서버로 데이터를 전송할 수 있습니다. 자바스크립트에서 CORS 요청을 생성하는 방법을 살펴봅시다.

1. XMLHttpRequest 사용

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.withCredentials = true; // 인증 정보 포함시
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('요청에 실패했습니다.');
    }
  }
};
xhr.send();

위의 코드는 XMLHttpRequest 객체를 사용하여 CORS GET 요청을 발생시키는 예시입니다. open() 메소드를 사용하여 요청 방법(GET, POST 등)과 요청할 URL을 설정하고, withCredentials 속성을 true로 설정하여 인증 정보(cookie, HTTP 인증 등)를 요청에 포함할 수 있습니다. onreadystatechange 함수를 통해 요청의 상태를 확인하고 응답을 처리합니다.

2. Fetch API 사용

fetch('http://api.example.com/data', {
  method: 'GET',
  credentials: 'include', // 인증 정보 포함시
})
  .then(function(response) {
    if (response.ok) {
      return response.text();
    } else {
      throw new Error('요청에 실패했습니다.');
    }
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

위의 코드는 Fetch API를 사용하여 CORS GET 요청을 발생시키는 예시입니다. fetch() 함수를 사용하여 요청할 URL과 요청 옵션을 설정하고, credentials 옵션을 include로 설정하여 인증 정보를 요청에 포함할 수 있습니다. then() 메소드를 사용하여 응답을 처리하고, catch() 메소드를 사용하여 요청 실패 시 에러 처리를 합니다.

CORS 요청을 발생시킬 때 주의할 점은 서버 측에서 올바른 CORS 설정을 해야 한다는 점입니다. 서버는 Access-Control-Allow-Origin 헤더를 설정하여 요청을 허용할 도메인을 지정해야 합니다. 또한, 필요에 따라 다른 CORS 관련 헤더도 설정할 수 있습니다.

이와 같이 자바스크립트에서 CORS 요청을 생성할 수 있으며, 이를 통해 웹 애플리케이션은 다른 도메인의 자원에 접근하여 좀 더 다양한 기능을 제공할 수 있습니다.

#cors #javascript