CORS (Cross-Origin Resource Sharing)는 브라우저에서 다른 도메인 간에 리소스를 공유할 수 있는 메커니즘을 가리킵니다. 보안 상의 이유로, 브라우저는 기본적으로 CORS 정책을 적용하여 다른 도메인으로의 API 요청이 제한됩니다.

그러나 Fetch API를 사용하여 CORS 요청을 보낼 수 있습니다. 이것은 서버에서 적절한 CORS 헤더를 설정하는 것 외에도, 클라이언트 측에서도 몇 가지 고려 사항이 필요합니다.

아래는 타입스크립트에서 Fetch API를 사용하여 CORS 요청을 보내는 방법에 대한 예제입니다.

async function fetchData() {
  const url = 'https://api.example.com/data'; // 외부 API 엔드포인트

  const response = await fetch(url, {
    method: 'GET',
    mode: 'cors',
    headers: {
      'Accept': 'application/json',
      // 다른 필요한 헤더 추가
    }
  });

  if (response.ok) {
    const data = await response.json();
    // 가져온 데이터 처리
  } else {
    throw new Error('데이터를 불러오는 중에 오류가 발생했습니다');
  }
}

fetchData();

위의 예제에서 fetch 함수의 두 번째 인자로 전달된 옵션 객체에서 mode 속성을 cors로 설정하고 있습니다. 이것은 브라우저가 CORS 요청임을 인식하도록 합니다. 또한, 요청 헤더에는 Accept와 같은 필수 헤더를 포함해야 합니다. 필요한 경우, 인증 정보를 함께 보내기 위해 credentials 옵션도 설정할 수 있습니다.

물론, 클라이언트 측에서 CORS 문제를 해결하기 위해 더 많은 구성이 필요할 수 있습니다. 이에 대한 자세한 내용은 해당 서버 및 API 제공 업체의 CORS 정책 및 도메인 구성에 따라 달라질 수 있습니다.

더 많은 정보 및 자세한 설명은 MDN web docs를 참조하십시오.

이제 Fetch API를 사용하여 타입스크립트에서 CORS 요청을 보내는 방법을 알게 되었습니다. CORS 요청을 처리하는 동안 발생한 문제는 주로 서버 측에서 발생하지만, 클라이언트 측에서도 올바른 설정이 필요합니다. 이를 통해 안전하고 효과적으로 외부 도메인과 통신할 수 있습니다.