CORS 완벽 이해 — 왜 차단되고 어떻게 해결하나

Same-Origin Policy — CORS가 존재하는 이유

CORS 헤더 — 서버가 응답에 무엇을 넣어야 하나

Preflight 요청 — OPTIONS 메서드의 정체

Preflight 요청/응답 흐름 예시
// 브라우저가 먼저 보내는 Preflight 요청
OPTIONS /api/data HTTP/1.1
Origin: https://frontend.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization

// 서버가 응답해야 하는 내용
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://frontend.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

// Preflight 통과 후 실제 요청이 전송됨
POST /api/data HTTP/1.1
Origin: https://frontend.example.com
Content-Type: application/json
Authorization: Bearer eyJ...

실전 설정 — Express와 Nginx에서 CORS 처리

Express — cors 패키지 사용 (환경별 출처 제어)
const cors = require('cors');

const allowedOrigins = [
  'https://example.com',
  'https://www.example.com',
  ...(process.env.NODE_ENV === 'development' ? ['http://localhost:3000'] : [])
];

const corsOptions = {
  origin: (origin, callback) => {
    // origin이 없으면 서버-서버 요청 (Postman 포함) — 허용
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('CORS policy violation'));
    }
  },
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,           // 쿠키/인증 헤더 허용 시
  maxAge: 86400                // Preflight 캐시 24시간
};

app.use(cors(corsOptions));
// OPTIONS Preflight 처리
app.options('*', cors(corsOptions));

Nginx — CORS 헤더 설정
server {
    listen 443 ssl;
    server_name api.example.com;

    location /api/ {
        # Preflight OPTIONS 요청 처리
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://example.com';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
            add_header 'Access-Control-Max-Age' 86400;
            add_header 'Content-Length' 0;
            return 204;
        }

        # 실제 요청에 CORS 헤더 추가
        add_header 'Access-Control-Allow-Origin' 'https://example.com' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;

        proxy_pass http://backend:3000;
    }
}

막히는 케이스 — CORS 에러 원인별 해결