Complete CORS Configuration Guide: Claude Code 활용 가이드

CORS설정をClaude Code로올바르게구현する

CORS（Cross-Origin Resource Sharing）は、異なるオリジン間での安全な通信を制御する仕組みです。설정ミスは보안リスクや機能不全につながります。Claude Code를 활용하면 要件に合ったCORS설정を正確に구현할 수 있습니다。

CORSの基本概念

プリフライト요청の流れ

> CORSのプリフライト요청の仕組みを説明して。
> シーケンス図も含めて。

브라우저は「単純でない요청」의 경우、OPTIONS메서드でプリフライト요청を전송し、서버の허가を확인します。カスタム헤더やJSON形式のPOST요청などが該当します。

Express.jsでの설정

環境別CORS설정

> Express.jsのCORS설정를 생성해줘。
> 要件：
> - 本番は特定オリジンのみ허가
> - 개발はlocalhost허가
> - 인증付き요청대응
> - プリフライト캐시

// src/middleware/cors.ts
import cors from 'cors';

const allowedOrigins: Record<string, string[]> = {
  production: [
    'https://myapp.example.com',
    'https://admin.example.com',
  ],
  development: [
    'http://localhost:3000',
    'http://localhost:5173',
  ],
};

export const corsMiddleware = cors({
  origin: (origin, callback) => {
    const env = process.env.NODE_ENV || 'development';
    const origins = allowedOrigins[env] || allowedOrigins.development;

    // 서버間通信（originなし）は허가
    if (!origin) return callback(null, true);

    if (origins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error(`CORS: ${origin} は許可されていません`));
    }
  },
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Request-ID'],
  exposedHeaders: ['X-Total-Count', 'X-Request-ID'],
  maxAge: 86400, // プリフライト캐시: 24시간
});

Next.jsでの설정

// next.config.js
const nextConfig = {
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Origin', value: 'https://myapp.example.com' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type,Authorization' },
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Max-Age', value: '86400' },
        ],
      },
    ];
  },
};

Nginx/CDNでのCORS설정

> NginxのリバースプロキシでCORS설정를 추가해줘。

location /api/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 86400;
        return 204;
    }

    add_header 'Access-Control-Allow-Origin' $http_origin always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;

    proxy_pass http://backend;
}

トラブルシューティング

よくある에러と解決策

Claude Code에브라우저のコンソール에러を貼り付けると、原因と수정方法を即座に教えてくれます。

에러例：

Access to XMLHttpRequest at 'https://api.example.com/data' from origin
'https://myapp.com' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested resource.

よくある原因：

• 서버側でCORS헤더が설정されていない
• credentials: true 使用時に Access-Control-Allow-Origin: * を指定している（特定オリジンを指定する必要がある）
• プリフライト요청のOPTIONS메서드をハンドリングしていない

보안上の주의

Access-Control-Allow-Origin: * は인증不要の公開APIにのみ使用して주세요。인증付き요청では必ず特定オリジンを指定し、credentials: true と組み合わせる必要があります。

정리

Claude Code를 활용하면 環境に応じたCORS설정を正確に구현し、トラブルシューティングも효율화할 수 있습니다。Web보안헤더설정やAPI개발가이드도 함께 참고하세요.

CORS의 상세 정보는MDN Web Docs - CORS를 참고하세요.