Express.js에서 CORS 문제를 해결하는 방법: 완벽 가이드

핵심 기술

Express.js 환경에서 브라우저 보안 기능인 CORS(Cross-Origin Resource Sharing) 정책으로 인해 발생하는 요청 차단 문제를 이해하고, cors 미들웨어를 사용하여 이를 효과적으로 해결하는 방법을 설명합니다.

기술적 세부사항

• CORS 정의: 서로 다른 출처(도메인, 프로토콜, 포트) 간의 리소스 공유를 제어하는 브라우저 보안 기능입니다.
• 발생 원인: 프론트엔드가 다른 도메인의 API에 접근할 때 브라우저가 기본적으로 차단합니다. (예: 프론트엔드 http://localhost:3000 vs API http://localhost:5000)
• 에러 메시지: 브라우저 콘솔에서 "Access to fetch at '...' from origin '...' has been blocked by CORS policy." 형태로 나타납니다.

• Express.js 해결책: cors npm 패키지를 설치하고 Express 애플리케이션에 미들웨어로 등록합니다.
  bash npm install cors
  ```javascript
  import cors from 'cors';
  import express from 'express';
  const app = express();

  app.use(cors()); // 모든 경로에 대해 CORS 허용

  app.listen(5000, () => {
  console.log('Server running on port 5000');
  });
  * **특정 출처 허용**: `corsOptions` 객체를 통해 특정 출처(`origin`), 허용 메서드(`methods`), 쿠키/헤더 허용(`credentials`) 등을 설정할 수 있습니다.javascript
  const corsOptions = {
  origin: 'http://localhost:3000', // 특정 출처만 허용
  methods: ['GET', 'POST'], // 허용할 HTTP 메서드
  credentials: true // 쿠키, 인증 헤더 허용
  };
  app.use(cors(corsOptions));
  * **동적 출처 제어**: 함수를 사용하여 동적으로 허용할 출처를 결정할 수 있습니다.javascript
  const corsOptions = {
  origin: function (origin, callback) {
  const allowedOrigins = ['http://localhost:3000', 'http://localhost:3001'];
  if (!origin || allowedOrigins.includes(origin)) {
  callback(null, true);
  } else {
  callback(new Error('Not allowed by CORS'));
  }
  }
  };
  app.use(cors(corsOptions));
  * **Preflight Request 처리**: `PUT`, `DELETE` 또는 커스텀 헤더를 포함하는 요청 시 브라우저가 보내는 `OPTIONS` 사전 요청을 처리해야 합니다.javascript
  app.options('', cors()); // 모든 경로에 대한 OPTIONS 요청 처리
  ```
  * CORS 설정 요약*: 모든 출처 허용, 단일 출처 허용, 다중 출처 허용(함수 사용), Preflight 요청 처리 방법을 표로 정리합니다.

개발 임팩트

cors 미들웨어를 사용하면 프론트엔드와 백엔드 간의 원활한 API 통신을 보장하고, 개발 생산성을 향상시킬 수 있습니다. 또한, 보안 설정을 통해 의도하지 않은 도메인으로부터 API를 보호하고, 쿠키 및 커스텀 헤더를 통한 인증 메커니즘을 지원할 수 있습니다.