01 · Concept

CORS (Cross-Origin Resource Sharing)

CORS는 브라우저의 동일 출처 정책을 제어하여 다른 출처의 리소스 접근을 허용하는 HTTP 헤더 기반 메커니즘입니다.

브라우저는 보안을 위해 동일 출처 정책(Same-Origin Policy)을 적용하여 다른 출처의 리소스 접근을 기본적으로 차단합니다. 출처(Origin)는 프로토콜 + 호스트 + 포트의 조합으로 결정되며, CORS는 서버가 HTTP 헤더를 통해 특정 출처의 접근을 허용하는 방식으로 이 제한을 완화합니다.

02 · Interactive Demo

CORS 요청 흐름 시각화

각 시나리오를 선택하고 단계별로 재생하여 브라우저와 서버 간의 CORS 헤더 교환 과정을 확인하세요.

Browser
https://app.example.com
대기 중
Server
https://api.other.com
1
→
GET 요청 전송
REQ
2
←
응답 + CORS 허용
RES
GET, HEAD, POST(단순) 요청은 Preflight 없이 바로 전송됩니다.
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// Express.js 서버 예시
app.use((req, res, next) => {
  // 허용할 출처 지정 (* 는 모든 출처 허용)
  res.setHeader('Access-Control-Allow-Origin',
    'https://app.example.com');

  // 허용할 HTTP 메서드
  res.setHeader('Access-Control-Allow-Methods',
    'GET, POST, PUT, DELETE, OPTIONS');

  // 허용할 요청 헤더
  res.setHeader('Access-Control-Allow-Headers',
    'Content-Type, Authorization');

  // Preflight 캐시 시간 (초)
  res.setHeader('Access-Control-Max-Age', '86400');

  // OPTIONS 요청에 대한 빠른 응답
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }
  next();
});
04 · Interview Point

면접 핵심 질문

CORS(Cross-Origin Resource Sharing)는 브라우저의 동일 출처 정책(Same-Origin Policy)을 우회하여 다른 출처의 리소스에 접근할 수 있게 하는 HTTP 헤더 기반 메커니즘입니다. 출처(Origin)는 프로토콜 + 호스트 + 포트의 조합으로 결정됩니다. CORS는 브라우저가 강제하는 보안 정책이며, 서버 간 통신에서는 적용되지 않습니다.
Simple Request는 GET, HEAD, POST 메서드 중 하나이고, 허용된 헤더(Accept, Content-Type 등)만 사용하며, Content-Type이 text/plain, multipart/form-data, application/x-www-form-urlencoded 중 하나인 경우입니다. 이 조건을 만족하지 않으면 브라우저가 OPTIONS 메서드로 Preflight 요청을 먼저 보내 서버의 허용 여부를 확인한 후 실제 요청을 전송합니다.
1. 서버 측 CORS 헤더 설정 — Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등을 적절히 설정합니다. 2. 프록시 서버 사용 — 개발 환경에서 next.config.js의 rewrites나 webpack의 devServer.proxy를 활용합니다. 3. credentials 설정 시 — Access-Control-Allow-Origin에 * 대신 구체적인 출처를 명시하고 Access-Control-Allow-Credentials: true를 설정합니다.