웹 개발을 할 때, 서로 다른 도메인 간에 Ajax 요청을 보내는 것은 보안 정책 때문에 일반적으로 허용되지 않습니다. 그러나 여러분이 관리하는 서버와의 통신이 필요할 때, 이 문제를 해결하는 방법이 있습니다.

CORS 설정을 통한 해결

먼저 해당 서버에서 CORS(Cross-Origin Resource Sharing)를 허용하도록 설정해야 합니다. 서버 설정 파일에 다음과 같이 CORS를 허용하는 코드를 추가하세요.

// 예시: Express.js를 사용하는 경우
import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors());

위 설정을 통해 해당 서버에서 오는 요청은 모두 허용됩니다.

TypeScript에서 Ajax 요청

이제 타입스크립트에서 CORS를 허용하는 서버로 Ajax 요청을 보내는 방법을 알아보겠습니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://cors-enabled-server.com/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    // 요청이 성공할 경우 처리할 로직
  }
};
xhr.send();

위 코드는 XMLHttpRequest를 사용하여 GET 요청을 보내는 예제입니다.

결론

서로 다른 도메인 간 통신은 일반적인 보안 정책으로 허용되지 않지만, CORS 설정과 타입스크립트를 이용하여 간단하게 해결할 수 있습니다.

추가 정보를 원하신다면 이 MDN 문서를 참고하세요.