웹 애플리케이션에서 다른 도메인에 있는 리소스에 접근할 수 있는 권한을 제어하기 위해 CORS(Cross-Origin Resource Sharing)가 사용됩니다. 보안 상의 이유로 브라우저는 보통 스크립트 내에서 다른 출처의 리소스에 접근하는 것을 제한합니다.

CORS의 동작 방식

1. 요청 전송: 클라이언트가 다른 출처의 리소스에 대한 요청을 보냅니다.
2. 프리플라이트 요청 (Preflight Request): 복잡한 요청(Credentials와 같은 특정한 헤더를 포함하는 요청)의 경우, 브라우저는 사전 요청을 보내어 서버의 허용 여부를 확인합니다.
3. 응답 확인: 서버에서는 요청에 대한 허용 여부를 확인하고, 허용된 경우 응답에 CORS 관련 헤더를 추가합니다.
4. 리소스 요청: 허용된 경우, 클라이언트는 실제 리소스 요청을 보내고 서버는 이에 응답합니다.

CORS 구성

CORS를 구성하기 위해 서버 측에서는 다음과 같은 헤더를 설정해야 합니다.

• Access-Control-Allow-Origin: 클라이언트 도메인이 접근을 허용하는지 여부를 결정합니다.
• Access-Control-Allow-Methods: 서버가 허용하는 HTTP 메서드를 지정합니다.
• Access-Control-Allow-Headers: 허용되는 HTTP 헤더를 지정합니다.
• Access-Control-Allow-Credentials: 인증 헤더를 허용할지 여부를 결정합니다. (true 또는 false)

CORS와 TypeScript

TypeScript를 이용하여 CORS 문제를 해결하는 방법에는 여러가지가 있습니다. 예를 들어, Express.js와 같은 Node.js 프레임워크를 사용하여 서버 측에서 CORS를 구성할 수 있습니다.

import * as express from 'express';
import * as cors from 'cors';

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

TypeScript의 fetch API를 사용할 때 클라이언트 측에서 CORS 이슈가 발생할 수 있습니다. 이때는 fetch 요청에 mode 옵션을 추가하여 CORS 문제를 해결할 수 있습니다.

fetch('http://example.com/data', {
  method: 'GET',
  mode: 'cors'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

결론

CORS는 웹 애플리케이션에서 다른 출처의 리소스에 안전하게 접근할 수 있는 메커니즘을 제공합니다. 이를 통해 보안과 안전한 데이터 교환을 보장할 수 있으며, TypeScript를 사용하여 서버와 클라이언트 측에서 CORS를 효과적으로 관리할 수 있습니다.

참고: MDN Web Docs - HTTP access control (CORS)