Express에서 CORS 처리 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상자: 프론트엔드/백엔드 개발자, API 구축자
- 난이도: 중급 (CORS 개념 이해 및 Express 미들웨어 사용 기초 필요)
핵심 요약
- CORS (Cross-Origin Resource Sharing)는 브라우저의 보안 기능으로,
origin이 다른 요청을 차단함 - Express에서 CORS 허용은
cors미들웨어를 사용해 간단히 처리 가능 (예:app.use(cors())) - 세부 설정은
origin,methods,credentials옵션을 통해 동적으로 제어 가능 - OPTIONS 요청 처리는
app.options('*', cors())로 반드시 추가해야 함
섹션별 세부 요약
1. CORS 개념과 문제점
- CORS 정의: 브라우저가 다른 도메인(origin)으로부터의 요청을 자동으로 차단하는 보안 정책
- 예시:
http://frontend.com→http://api.com요청 시, 브라우저가Access to fetch at '...' has been blocked by CORS policy오류 발생 - 문제점: 백엔드가 요청 출처를 명시적으로 허용하지 않으면 프론트엔드 요청이 차단됨
2. Express에서 CORS 허용 방법
- 기본 설정:
npm install cors설치 후app.use(cors())로 모든 경로에 CORS 허용 - 코드 예시:
```javascript
import cors from 'cors';
import express from 'express';
const app = express();
app.use(cors());
```
3. 세부 옵션 설정
- 고정된 출처 허용:
```javascript
const corsOptions = { origin: 'http://frontend.com', methods: ['GET', 'POST'], credentials: true };
app.use(cors(corsOptions));
```
- 동적 출처 검증:
```javascript
const corsOptions = {
origin: function (origin, callback) {
const allowedOrigins = ['http://frontend.com'];
if (!origin || allowedOrigins.includes(origin)) {
callback(null, true);
} else {
callback(new Error('Not allowed by CORS'));
}
}
};
app.use(cors(corsOptions));
```
4. OPTIONS 요청 처리
- preflight 요청은
PUT,DELETE, 커스텀 헤더 사용 시 자동으로 발생 - 해결 방법:
```javascript
app.options('*', cors());
```
5. 설정 가이드 테이블
| 개념 | 예시 |
|------|------|
| 모든 출처 허용 | app.use(cors()) |
| 특정 출처 허용 | origin: 'http://frontend.com' |
| 다중 출처 허용 | origin 함수 내부에서 allowedOrigins 배열 사용 |
| OPTIONS 요청 처리 | app.options('*', cors()) |
결론
- CORS 문제 해결은
cors미들웨어 사용이 핵심이며,origin,methods,credentials옵션을 통해 보안을 강화해야 함 - OPTIONS 요청 처리는 반드시 추가해야 하며,
app.options('*', cors())로 구현 - 보안 강화를 위해 출처를 명시적으로 제한하고, 필요 시
credentials옵션 활성화하여 쿠키/인증 헤더 지원